--- title: "JSX for the server" description: "Compose typed JSX views in your existing server. Add progressive HTML fragments when your page needs them." prose: false ---
{"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"}
```bash tab="npm" sync="pkg-manager" npm install @vincle/core ``` ```bash tab="bun" sync="pkg-manager" bun add @vincle/core ```
{"From JSX to HTML"} {"TypeScript"}
```tsx title="hello.tsx" import { renderToString } from "@vincle/core"; function App({ name }: { name: string }) { return

Hello, {name}!

; } const page = ; const html = await renderToString(page); ``` ```html

Hello, world!

```

{"The rendered output is a plain HTML string."}

{"Supported runtimes"}

{"Start with one view."}
{"Grow with your page."}

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

{"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"}
```tsx title="results-page.tsx" 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 ( ); } function Page() { return (

Search results

Loading results…

}>
); } const stream = renderToStream(() => , 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."}