Docs

README.md

@@ -20,72 +20,47 @@ Architecture.
 - 🏝️ **Partial System** - Interactive components with HTMX
 - 🚀 **Framework Agnostic** - Core composition engine
 
-## Quick Start
+## What is Reface?
+
+Reface is a modern web framework built on two key components:
+
+1. **Core Library** (RefaceComposer) - Template engine for HTML generation
+2. **Framework** (Reface) - Full-featured web framework with plugins and Islands
+   Architecture
+
+- [Getting Started](./docs/getting-started.md) - Quick introduction and basic
+  setup
+- [Main Concepts](./docs/concepts.md) - Core ideas and architecture
+- [API Reference](./docs/api.md) - Detailed API documentation
+
+### Quick Example
 
 ```typescript
+// Core API (Template Engine)
 import { RefaceComposer } from "@reface/core";
-import { StyledPlugin } from "@reface/plugins/styled";
-import { PartialsPlugin } from "@reface/plugins/partials";
 
-// Create composer instance
 const composer = new RefaceComposer();
-composer.use(new StyledPlugin());
-composer.use(new PartialsPlugin());
-
-// Create styled component
-const Button = styled.button`
-  & {
-    background: var(--primary-color, #3182ce);
-    color: white;
-    padding: 0.5rem 1rem;
-  }
-`;
-
-// Create interactive component
-const Counter = partial(async () => {
-  const count = 0;
-  return (
-    <div>
-      <span>{count}</span>
-      <Button {...Counter.trigger()}>Increment</Button>
-    </div>
-  );
-}, "counter");
-
-// Create page template
-function HomePage() {
-  return (
-    <div>
-      <h1>Welcome to Reface</h1>
-      <Counter />
-    </div>
-  );
-}
-
-// Compose HTML
-const html = composer.render(<HomePage />);
-```
+const template = div({ class: "greeting" })`Hello ${name}!`;
+const html = composer.render(template);
 
-## Examples
+// Framework API (Full Features)
+import { Reface } from "@reface";
 
-- [📚 Basic Components](./examples/basic) - Component composition
-- [🧩 Styled Components](./examples/styled) - CSS-in-JS examples
-- [🏝️ Partial Components](./examples/partials) - Interactive components
-- [🔌 Custom Plugin](./examples/plugin) - Plugin development
+const app = new Reface({
+  layout: Layout,
+}).page("/", Home);
 
-## Documentation
-
-- [Architecture](./docs/architecture.md) - Core concepts and composition design
-- [Components](./docs/components.md) - Component composition system
-- [Styling](./docs/styling.md) - CSS-in-JS styling
-- [Partials](./docs/partials.md) - Interactive components
-- [Plugins](./docs/plugins.md) - Plugin system
+Deno.serve(app.fetch);
+```
 
-## Contributing
+## Installation
 
-We welcome contributions! Please see our [Contributing Guide](./CONTRIBUTING.md)
-for details.
+```typescript
+// Using Deno
+import { Reface } from "jsr:@vseplet/reface";
 
-## License
+// Using NPM (coming soon)
+npm install @reface/core
+```
 
 MIT © [Reface](./LICENSE)

docs/api.md

@@ -0,0 +1,121 @@
+# API Reference
+
+## Core API
+
+### Template
+
+Base template creation and manipulation:
+
+```typescript
+import { createTemplate } from "@reface/template";
+
+const template = createTemplate({ tag: "div" });
+template({ class: "container" })`Content`;
+```
+
+### Elements
+
+Pre-defined HTML elements:
+
+```typescript
+import { button, div, span } from "@reface/elements";
+
+div({ class: "container" })`
+  ${span`Text`}
+  ${button({ type: "button" })`Click me`}
+`;
+```
+
+### JSX
+
+JSX support:
+
+```typescript
+import { createElement, Fragment } from "@reface";
+
+// Fragment
+<>
+  <div>First</div>
+  <div>Second</div>
+</>;
+
+// Components
+function Button(props: ButtonProps) {
+  return <button class={props.class}>{props.children}</button>;
+}
+```
+
+### Components
+
+Component creation:
+
+```typescript
+import { component } from "@reface";
+
+const Button = component<ButtonProps>((props, children) => {
+  // Elements API
+  return button({ class: props.class })`${children}`;
+
+  // Or JSX
+  return <button class={props.class}>{children}</button>;
+});
+```
+
+## Framework API
+
+### Reface
+
+Main framework class:
+
+```typescript
+const app = new Reface({
+  layout: Layout,
+  plugins: [...plugins],
+});
+
+// Pages
+app.page("/", HomePage);
+
+// Hono integration
+app.hono();
+```
+
+### Plugins
+
+Built-in plugins:
+
+```typescript
+import { StyledPlugin } from "@reface/plugins/styled";
+import { PartialsPlugin } from "@reface/plugins/partials";
+
+app.use(new StyledPlugin());
+app.use(new PartialsPlugin());
+```
+
+### Styling
+
+CSS-in-JS system:
+
+```typescript
+import { styled } from "@reface/plugins/styled";
+
+const Button = styled.button`
+  & {
+    /* styles */
+  }
+`;
+```
+
+### Islands
+
+Interactive components:
+
+```typescript
+import { island } from "@reface";
+
+const Interactive = island({
+  template: () => {...},
+  state: {...},
+  rpc: {...}
+});
+```