Reface

Modern web framework for building interactive applications with Islands Architecture.

Features

• 🎯 Type-safe Templates - Full TypeScript support with JSX
• 🧩 Template Composition - Mix JSX and template literals
• 🔌 Plugin System - Extensible composition pipeline
• 🎨 Styled Components - CSS-in-JS with type safety
• 🏝️ Partial System - Interactive components with HTMX
• 🚀 Framework Agnostic - Core composition engine

Quick Start

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 />);

Examples

• 📚 Basic Components - Component composition
• 🧩 Styled Components - CSS-in-JS examples
• 🏝️ Partial Components - Interactive components
• 🔌 Custom Plugin - Plugin development

Documentation

• Architecture - Core concepts and composition design
• Components - Component composition system
• Styling - CSS-in-JS styling
• Partials - Interactive components
• Plugins - Plugin system

Contributing

We welcome contributions! Please see our Contributing Guide for details.

License

MIT © Reface