Server-side JSX renderer

Your views in JSX.
Your app in HTML.

Compose typed, async components in your existing server. Start with an HTML response, then let slower parts of the page arrive when they are ready.

Render your first view Explore streaming

npm install @vincle/core

bun add @vincle/core

From JSX to HTMLTypeScript

import { renderToString } from "@vincle/core";

function App({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

const page = <App name="world" />;
const html = await renderToString(page);

<h1>Hello, world!</h1>

The rendered output is a plain HTML string.

Supported runtimes

Node.js 22+
Bun
Deno
Cloudflare Workers

Start with one view.
Grow with your page.#

Keep your server and routing. Choose how much rendering behavior each page needs.

Compose a view

Use functions, typed props, and async data to build reusable HTML components.

Write your first component

Return it from a route

Render with @vincle/core and send the HTML from your existing HTTP handler.

Connect a view to your server

Defer the slow parts

Add @vincle/flow to send the page shell first, then deliver deferred HTML fragments.

Stream a fragment

The page can arrive before the results.#

Keep the heading visible while an async component loads. With flow, a fallback fills the space until its HTML is ready.

Choose how it is delivered: natively, or through an HTMX or Turbo adapter.

Follow the complete example

import { Defer, renderToStream } from "@vincle/flow";
import { NativeAdapter } from "@vincle/flow/adapters";

async function findResults() {
  return [{ title: "Getting started", href: "/guide/getting-started/installation" }];
}

async function Results() {
  const items = await findResults();
  return (
    <ul>
      {items.map((item) => (
        <li>
          <a href={item.href}>{item.title}</a>
        </li>
      ))}
    </ul>
  );
}

function Page() {
  return (
    <main>
      <h1>Search results</h1>
      <Defer fallback={<p>Loading results…</p>}>
        <Results />
      </Defer>
    </main>
  );
}

const stream = renderToStream(() => <Page />, NativeAdapter);

The Results component stays the same. The page opts into deferred rendering.

Built into the renderer.#

Typed views, predictable rendering, and explicit HTML boundaries.

View source on GitHub

Async components

Fetch data inside the component that needs it. Vincle awaits the tree.

Tree context

Share a value with a subtree through a React-style context Provider, or keep per-request state in a Scope.

HTML escaping

Content is escaped by default, dangerous URL schemes are blocked, and function-valued attributes are refused.

TypeScript support

Write components and HTML attributes with TypeScript checking your work.

Your views in JSX.Your app in HTML.

Start with one view.Grow with your page.#