GitHub
PURESTACK IS NOW OPEN SOURCE.

One language.
A whole frontend.

Content, components, styles, and interactivity.
One coherent TypeScript ecosystem. Built for you and your AI.

Start building Explore the source
TypeScript-nativeMIT licensedYour choice of backend
a little source. a lot of possibility. TypeScript + MDX
SOURCE 
---
title: Your next idea
template: splash
---

# Your next idea.

Write the story. Build the product.

<Panel tone="neutral">
  <Badge tone="success">Ready to build</Badge>
  Content and components, together.
</Panel>
RENDERED PREVIEW
FROM IDEA TO INTERFACE

Your next idea.

Write the story. Build the product.

Ready to build

Content and components, together.

Rendered to HTML by PureStack
SOURCE 
import { createApp, html, ref } from 'regor'

const count = ref(0)
const increment = () => count(count() + 1)

createApp({ count, increment }, {
  selector: '#counter',
  template: html`<button
    @click="increment">
    Clicked {{ count }} times
  </button>`,
})
LIVE REGOR PREVIEW
A LITTLE REACTIVITY

Go on. Give it a click.

One ref. One event. A real interaction.

Explicit browser code. Predictable state.
SOURCE 
import { Style } from '@purestack/ts-css'

const card = new Style('.your-card')
  .padding('24px')
  .borderRadius('12px')
  .backgroundColor('#101828')
  .color('#9cc2ff')

// Typed source. Standard CSS output.
card.toCSS()
TYPED STYLE PREVIEW

A style of your own.

Fluent. Composable. Still CSS.

Built with the Style API shown here.
Same source. Connected workflow. Made with PureStack

Not a new language to learn. A better way to bring the pieces together.

ONE FOUNDATION. MANY POSSIBILITIES.
Content sitesDocumentationProduct interfacesAdmin toolsDashboards
01 / THE FRAMEWORK

Everything connects.
So you can keep building.

From the first page to the product around it.
A frontend that grows without losing its shape.

Content is part of the product.

Write in Markdown. Compose with Regor MDX. Keep routes, metadata, navigation, and page scripts close to the content they belong to.

▾ contentone place for your frontend
{ } siteConfig.jsonconfigure
M↓ index.mdxcompose
TS dashboard.tsinteract
▾ docs
M↓ getting-started.mdexplain
Explore the content pipeline

Primitives for real interfaces.

Forms, charts, tabs, modals, toasts, and virtual tables. A shared component vocabulary for the surfaces your product needs.

Project overviewActive
Example activity 01: 25 02: 42 03: 32 04: 57 05: 46 06: 64 07: 52 08: 71 09: 61 10: 85 11: 72 12: 98
01040812
Ready for your next featurePS
Meet the components

Design with a system.

Typed CSS, semantic tones, shared tokens, and light and dark themes. Visual decisions that stay connected.

One palette.
Every component.

Static where it can be.

Render content to HTML. Mount Regor apps where interaction belongs. Bundle browser TypeScript through the same pipeline.

HTMLCSS+ your JSWEB

Your editor is in on it.

Component completion, typed prop hints, template diagnostics, and go-to-definition with the PureStack VS Code extension.

<Panel tone="success">SemanticTone
BUILT FOR THE WAY WE BUILD NOW

The first prompt is
just the beginning.

AI can generate a first draft. A real product needs source that stays understandable as features change, screens multiply, and designs evolve.

PureStack keeps intent in typed, inspectable code. Easier for you to reason about. Easier for your AI to work with.

Read the philosophy
M↓ ContentTS ComponentsTS StylesTS Scripts
PureStackOne coherent source model
Your product frontend

Readable by humans. Navigable by AI.

02 / THE ECOSYSTEM

A complete stack.
With room for your way.

One public entry point. Focused packages underneath.
Explore the pieces that make PureStack work.

01

Content & publishing

MDX, routing, navigation, live reload, search, i18n, and static output.

@purestack/ts-ssg
02

Components & interaction

Regor primitives for pages, forms, charts, and application interfaces.

@purestack/ts-components
03

Styles & themes

Palettes, semantic tones, skins, typography, and responsive tokens.

@purestack/ts-style
04

Tools & foundations

Typed builders, SVG icons, rendering tools, and a source-aware editor.

ts-html · ts-css · ts-ssg-vscode
Frontend infrastructure. Your backend, your hosting. View all packages
03 / START BUILDING

Make something
of your own.

Install purestack from npm to build your own site. Explore the source and run the included examples with the steps here, or follow the CLI guide to start a project.

  1. 01
    Get the source

    Clone the repository and install with Yarn.

  2. 02
    Start the playground

    Run the included content site locally.

  3. 03
    Make it yours

    Edit a page. Add a component. Keep going.

Your terminalFROM SOURCE
# Clone the project 
git clone https://github.com/PureStackStudio/PureStack.git
# Install dependencies 
cd PureStack
yarn install
# Start the sample site 
yarn dev
Open localhost:4173 in your browser
Setup details in the README
A FEW GOOD QUESTIONS

Good to know.

A little more context
before your first commit.

What can I build with PureStack?

Content sites, documentation, landing pages, product interfaces, dashboards, and admin tools. Start with static pages and add TypeScript browser apps where you need interaction.

How does interactivity work?

MDX components render to HTML during the build. For client-side state and events, mount a Regor application from a TypeScript entry point using RegorApp or PageScript. PureStack bundles that entry point and its dependencies for the browser.

Is this React MDX?

PureStack uses Regor MDX: Markdown with Regor components and directives. You can use the familiar .mdx extension or the explicit .rmdx extension. React components are not interchangeable with Regor components.

Do I need a particular backend or host?

No. PureStack produces static HTML, CSS, and browser assets that you can serve from a static host or your own infrastructure. Your browser code can talk to whichever backend your product uses.

How do I install PureStack?

Add the published package to your project with yarn add purestack. The quick start above runs the included sample from a repository checkout; the CLI guide shows how to build your own site with the installed package.

Less fragmentation.
More creation.

Your next frontend starts with a clearer foundation.

Build with PureStack Open source. TypeScript-native. Yours to build on.