tenstatic
v0.2.0
Published
Zero-config Static Site Generation plugin for TanStack Start
Maintainers
deshicoreReadme
tenstatic
tenstatic is a zero-config Static Site Generation (SSG) plugin designed specifically for TanStack Start. It radically simplifies creating content sites by automatically generating route handlers for your MDX files, while also giving you full control over standard React routes.
Features
- 🪄 Auto-Generated Routes: Just create a
.mdxfile, andtenstaticautomatically generates the corresponding type-safe.tsxroute file for you. - ⚛️ "use static" Directive: Turn any standard React route into a static page with a single line of code.
- 🧠 Automatic SEO: Frontmatter fields like
title,description, andimageare automatically injected into your page's<head>metadata. - 📝 MDX Power: Full support for mixing React components inside Markdown.
- ⚡ Development SSR: Complete HTML rendering in development mode (View Source works!).
- 🚀 Zero Boilerplate: No need to manually create route files or configure
headlogic for every content page.
Installation
npm install tenstaticSetup
Add the plugin to your app.config.ts (or vite.config.ts):
// app.config.ts
import { defineConfig } from '@tanstack/start/config'
import tenstatic from 'tenstatic'
export default defineConfig({
plugins: [tenstatic()],
})Usage
1. MDX Routes (The "Just Write Markdown" Workflow)
Create a file at src/routes/about.mdx. tenstatic will automatically generate src/routes/about.tsx for you.
---
title: My Awesome Post
description: This description will effectively become the <meta name="description"> content.
---
# Hello World
This content is automatically wrapped in a route with the correct title and meta tags!2. Standard React Routes ("use static")
You can turn ANY normal TanStack Router file into a pre-rendered static page just by adding "use static" at the top of the file.
// src/routes/hello.tsx
'use static' // <--- This magic line enables SSG for this route
import { createFileRoute } from '@tanstack/react-router'
export const Route = createFileRoute('/hello')({
component: HelloComponent,
})
function HelloComponent() {
return (
<div>
<h1>Hello World</h1>
<p>This page will be statically generated at build time!</p>
</div>
)
}Static vs Dynamic
- MDX Files: Static by default. Opt-out with
dynamic: truein frontmatter. - TSX/JSX Files: Dynamic by default. Opt-in with
"use static"at the top.
Architecture
tenstatic(Plugin): Handles the build process, SSG generation, and auto-route creation.tenstatic/runtime: Provides runtime utilities likeDevIndicatorandRenderingProviderwhich are auto-injected into your root layout during development.