I Built PureStack: A TypeScript-Native Frontend Stack

Ahmed Yasin — Fri, 02 Oct 2026 06:52:21 +0000

I’ve just released the first public version of PureStack, an MIT-licensed frontend stack built around one idea:

content, components, styles, and browser interactivity should be able to live in one coherent TypeScript-oriented system.

I built it because modern frontend projects often end up combining an SSG, MDX processor, component library, styling system, theme layer, browser bundler, search tooling, and editor plugins from separate projects.

PureStack takes a more integrated approach.

Static by default

A project starts with a content directory:

content/
  siteConfig.json
  index.mdx
  docs/
    getting-started.md
  dashboard.ts

Install it with:

npm install purestack

Then:

npx purestack serve --content ./content

PureStack discovers Markdown/MDX files, creates routes and navigation, renders HTML, generates theme CSS, copies assets, builds search indexes when enabled, and bundles browser-side TypeScript where required.

Production output is ordinary static HTML, CSS, JavaScript and assets:

npx purestack build --content ./content

There is no required backend or hosting platform.

Build-time components, browser apps when needed

PureStack uses Regor as its native component framework.

Components inside MDX are rendered during the build:

<Panel tone="info">
  <Badge tone="success">Ready</Badge>
  Everything here becomes static HTML.
</Panel>

That page does not need a client-side framework just to display the component.

When interaction is required, it is explicit.

A page can load ordinary TypeScript:

<PageScript src="./dashboard.ts" />

or mount a Regor application:

<RegorApp id="counter" src="./counter.ts" />

A browser app can then use reactive state normally:

import { createApp, html, ref } from 'regor'

const count = ref(0)

createApp(
  { count },
  {
    selector: '#counter',
    template: html`
      <button @click="count(count + 1)">
        Clicked {{ count }} times
      </button>
    `,
  },
)

So the model is essentially:

Markdown / MDX
      ↓
static HTML
      +
optional TypeScript apps

Components, themes and typed CSS

PureStack currently includes 67 public components and browser entry points, covering forms, buttons, tabs, modals, charts, virtual lists/tables, navigation, search, landing-page components and more.

Styling is also part of the stack.

@purestack/ts-css provides a typed CSS builder:

import { s } from '@purestack/ts-css'

s('.card').css({
  padding: '1rem',
  borderRadius: '12px',
})

The output is still standard CSS.

Above that, @purestack/ts-style provides light/dark themes, semantic tones, typography, breakpoints and shared design tokens used by the component library.

Tooling is part of the architecture

PureStack also has a VS Code extension that understands its source model.

It provides things like:

component and prop completion
Go to Definition
frontmatter completion
Regor template highlighting
markup diagnostics
formatting inside TypeScript html templates

For example:

const view = html`
  <Panel tone="success">
    <Btn size="sm">{{ title }}</Btn>
  </Panel>
`

is treated as real markup rather than an opaque string.

The project uses itself

purestack.studio is built with PureStack itself.

The website uses the SSG, MDX, Regor, the component library, typed styles, themes and browser TypeScript. The component documentation also runs real interactive examples.

That has been useful because the framework has to support its own production website rather than only synthetic demos.

Why another frontend stack?

PureStack isn't based on the idea that existing frontend tools are bad.

The experiment is about integration.

Instead of selecting an independent solution for every frontend concern, I wanted to see what happens when the content pipeline, components, styling, static rendering, browser apps and editor tooling are designed to work together.

The first public version is now available:

Website: https://purestack.studio/

GitHub: https://github.com/PureStackStudio/PureStack

npm: https://www.npmjs.com/package/purestack

I’d be interested in feedback on the architecture—especially the decision to keep pages static by default and mount browser applications only where interaction is actually needed.