Component Showcase

Every content type in the Stackwright schema, rendered on the docs theme. Used for visual regression and accessibility testing.

Slide One

YAML is the syntax. The schema is the safety net.

Slide Two

AI agents write validated content through conversation.

Slide Three

The output is a Next.js app you own. No lock-in.

Timeline Demo

Q1 2025

Project inception — core schema and YAML pipeline

Q2 2025

Theme system, dark mode, and 13 content types

Q3 2025

Otter Raft AI agents and MCP integration

Q4 2025

launch-stackwright CLI and public release

Icon Grid Demo

TypeScript
Themes
Zod Validation
Fast Builds
Next.js
MCP Server

Tabbed Content Demo

Stackwright uses YAML as the authoring format. Content is validated by Zod schemas and rendered as React components.

yaml
1content:
2  content_items:
3    - type: main
4      label: hero
5      heading:
6        text: "Hello World"
7        textSize: h1
8      textBlocks:
9        - text: "My first Stackwright page."
10          textSize: body1

Feature List Demo

AI-Native

Agents write schema-validated YAML through conversation.

Safe by Construction

Zod schemas enforce correctness at build time.

Fast

API spec to working demo in hours.

Testimonial Grid Demo

“Stackwright turned our hackathon into a shipping machine.”

Demo Author A
Developer

“The Otter Raft built our entire site through conversation.”

Demo Author B
Product Manager

“Dark mode that actually works. Every component respects the theme.”

Demo Author C
Designer

FAQ Demo

What is Stackwright?
A YAML-driven React application framework that enables rapid development of professional websites.
Do I need to know React?
No. You write YAML, the framework handles rendering. But you can extend with custom React components.
How does dark mode work?
Define darkColors in your theme YAML. ThemeProvider resolves the correct palette based on user preference.
Can AI agents build my site?
Yes. The Otter Raft includes Brand, Theme, and Page agents that build sites through conversation.

Pricing Table Demo

Open Source

$0

Free forever

  • ✓All 18 content types
  • ✓Dark mode support
  • ✓CLI tools
Get Started
Popular

Pro

$49/mo

For teams

  • ✓Everything in Open Source
  • ✓Priority support
  • ✓Custom components
  • ✓Team collaboration
Coming Soon

Enterprise

Custom

For organizations

  • ✓Everything in Pro
  • ✓Dedicated onboarding
  • ✓SLA guarantees
  • ✓Custom integrations
Contact Us
Info Alert
This is an informational alert. Used for general guidance and tips.
Warning Alert
This is a warning alert. Used for potential issues.
Success Alert
This is a success alert. Used for confirmations.
Danger Alert
This is a danger alert. Used for critical errors.
Note Alert
This is a note. Used for supplementary information.
Tip Alert
This is a tip. Used for best practices and recommendations.

Contact Form Demo

Get in touch with the Stackwright team.

Address:123 Framework Lane, Open Source City
Send Email

Text Block Demo

Text blocks support headings, multiple text paragraphs, and action buttons.

Use them for content sections that don't need media.

Grid Demo

Left Column

Grid columns can contain any content type. This is a text block in the left column.

Right Column

This is a text block in the right column. Grid layout stacks on mobile.

NavSidebar - Persistent Navigation

The NavSidebar component provides persistent navigation for content-heavy sites. On desktop, it displays as a fixed sidebar with collapsible sections. On mobile, it becomes a slide-out drawer accessed via a floating action button.

**Key Features:**

• Desktop: Fixed sidebar with collapse toggle

• Mobile: Slide-in drawer with backdrop overlay

• Nested navigation with expand/collapse

• Active link highlighting

• Full keyboard navigation (Tab, Enter, Escape, Arrows)

• WCAG 2.1 AA compliant

**Try it:** Look to the left on desktop, or tap the menu button on mobile. The sidebar you're using right now is the NavSidebar component!