Full-stack HonoX starter with type-safe CSS-in-JS (PandaCSS), and a Git-backed CMS (Sveltia CMS).

Live demo: https://honox.chen.so, https://honox-ts.vercel.app

See docs/ARCHITECTURE.md for UI components architecture details.

1. Write — Markdown files in content/posts/*.md with YAML frontmatter.
2. Manage — Visit /admin/ to edit posts.
3. Build — bun run build generates static HTML for post list and individual posts.
4. Translate — Add content/posts/<locale>/<slug>.md for a translated post (same convention as pages/docs); loadPosts()/loadPostBySlug() fall back to the English file for anything not translated. Each locale gets its own search index at /api/posts/:lang/search.json; set blog.excludeUntranslatedFromSearch: true in that locale's content/configs.<locale>.json once every post is actually translated, to stop search falling back to English-titled results for that locale.

1. Design — Create pages in content/pages/*.json using the CMS UI. This includes the homepage itself (content/pages/index.json).
2. Components — Choose from 25+ UI components (Stack, Card, Dialog, etc.).
3. Nesting — Build complex layouts with recursive nesting (e.g., a Card inside a Stack inside another Stack).
4. Render — The PageRenderer component (app/components/page-renderer.tsx) maps JSON data to themed UI components, loaded via app/lib/pages.ts.
5. Translate — Add content/pages/<locale>/<slug>.json for a translated page; loadPage() falls back to the default-locale file for anything not translated.

A read-only JSON REST API over the same content/posts/*.md files that back /blog, prerendered by SSG like every other route. Because the site deploys as static files with no live server at request time, every endpoint's URL includes a literal .json suffix — that's the exact filename the build writes to dist/, so the same path works identically in dev (bun run dev) and once deployed.

Implementation: app/lib/posts.ts (loadPosts, loadPostBySlug, loadPostsByAuthor) backs all routes. app/routes/api/posts/_404.tsx scopes a JSON not-found handler to this namespace so API errors don't fall back to the site's HTML 404 page.

This starter contains an advanced layout builder inside the Sveltia CMS pages collection. Users can construct complex, responsive, dynamic pages directly from the CMS UI.

We support a full collection of over 25+ rich presentational and interactive components:

• Layout & Structure: Stack (Direction/Align/Justify/Gap), Group (Grow/Attached), Fieldset (Legend/Helper/Error)
• Text & Typography: Heading (Level/Size), Text (Content/Size)
• UI Elements: Button (Variant/Palette/Size), Badge (Variant/Palette/Size), Alert (Status/Variant), Card (Variant/Size/Clickable)
• Form & Controls: Checkbox, Combobox (Items list/Clear trigger), Field, RadioGroup, SegmentGroup, Slider, Switch
• Feedback & Loaders: Progress (Linear/Circular), Skeleton (NoOfLines/Circle), Spinner, Toast (global toast host, paired with a Button's raw onClick)
• Overlays & Dialogs: Collapsible (Trigger/Open), Popover (ShowArrow/Closable), Dialog (Cancel/Confirm/Closable), Drawer (Cancel/Confirm/Closable), Dropdown (Nestable item action list)
• Tables & Data: PaginatedTable, Pagination

Components like Stack, Fieldset, Group, HoverCard, Popover, Collapsible, Dialog, and Drawer fully support recursive children nesting. Through carefully designed YAML anchors and references in Sveltia CMS public/admin/config.yml and a smart layout compiler inside app/components/page-renderer.tsx, users can nest components (e.g. Buttons/Skeletons inside a Card inside a Collapsible inside a Stack) to build sophisticated dashboard layouts.

Sveltia CMS is configured in public/admin/config.yml. You can use it locally or with a Git backend:

• GitHub: name: github
• GitLab: name: gitlab
• Bitbucket: name: bitbucket
• Azure: name: azure

See Sveltia CMS docs for details.

• Bun 1.0+
• Node.js 18+ (for PandaCSS)

app/
  components/page-renderer.tsx # Dynamic Page layout compiler
  components/ui/    # Public component API
  islands/          # Client-side interactive islands
  routes/           # File-based routing
    blog/index.tsx               # Post list (blog/<locale>/index.tsx re-exports it)
    blog/[slug].tsx               # Individual post (blog/<locale>/[slug].tsx re-exports it)
    blog/by-tag/[tag].tsx        # Tag-filtered post list
    blog/[lang]/by-tag/[tag].tsx # Same, locale-prefixed — a dynamic `[lang]`
                                  #   segment, not per-locale re-exports, since
                                  #   nothing else claims this deeper path shape
    blog/by-author/[author].tsx  # Author-filtered post list
    blog/[lang]/by-author/[author].tsx # Same, locale-prefixed
    pages/[slug].tsx             # Page builder SSG route
    api/posts/                   # Read-only posts REST API
      index.json.ts              # GET /api/posts/index.json — collection
      [slug].json.ts             # GET /api/posts/:slug.json — single post
      search.json.ts             # GET /api/posts/search.json — English-only search index
      [lang]/search.json.ts      # GET /api/posts/:lang/search.json — locale-scoped index
      by-author/[author].json.ts # GET /api/posts/by-author/:author.json
      _404.tsx                   # JSON 404s scoped to /api/posts/*
  lib/posts.ts      # Post loading/parsing shared by blog pages + API, locale-aware
  lib/pages.ts      # Page builder JSON loading, locale-aware (used by / and /pages/:slug)
utils/
  markdown.ts        # Frontmatter parser + MD→HTML
content/posts/       # Blog post markdown files
content/posts/<locale>/ # Translated posts, e.g. content/posts/zh/getting-started-with-honox.md
content/pages/       # Page builder JSON layouts (index.json is the homepage; blog.json/docs.json are just title+intro content for /blog and /docs, not their header — see docs/PageBuilder.md)
content/pages/<locale>/ # Translated page layouts, e.g. content/pages/zh/index.json
public/admin/        # Sveltia CMS static files
  config.yml          # CMS configuration
  index.html          # CMS UI