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

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 - Quick introduction and basic setup

• Main Concepts - Core ideas and architecture

• API Reference - Detailed API documentation

Quick Example

 1// Core API (Template Engine)
 2import { RefaceComposer } from "@reface/core";
 3
 4const composer = new RefaceComposer();
 5const template = div({ class: "greeting" })`Hello ${name}!`;
 6const html = composer.render(template);
 7
 8// Framework API (Full Features)
 9import { Reface } from "@reface";
10
11const app = new Reface({
12  ​layout: Layout,
13}).page("/", Home);
14
15Deno.serve(app.fetch);

Installation

1// Using Deno
2import { Reface } from "jsr:@vseplet/reface";
3
4// Using NPM (coming soon)
5npm install @reface/core

MIT © Reface