DEV Community

Ahmed Yasin
Ahmed Yasin

Posted on AI-assisted

I Built PureStack: A TypeScript-Native Frontend Stack

#showdev #opensource #frontend #typescript

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
Enter fullscreen mode Exit fullscreen mode

Install it with:

npm install purestack
Enter fullscreen mode Exit fullscreen mode

Then:

npx purestack serve --content ./content
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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" />
Enter fullscreen mode Exit fullscreen mode

or mount a Regor application:

<RegorApp id="counter" src="./counter.ts" />
Enter fullscreen mode Exit fullscreen mode

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>
    `,
  },
)
Enter fullscreen mode Exit fullscreen mode

So the model is essentially:

Markdown / MDX
      ↓
static HTML
      +
optional TypeScript apps
Enter fullscreen mode Exit fullscreen mode

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',
})
Enter fullscreen mode Exit fullscreen mode

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>
`
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)