AI-native block development

Blockstudio's file-based architecture and zero build tooling create the ideal environment for AI coding agents. The video below shows a complete WordPress site with 10 custom blocks and 6 pages built from a single prompt.

Read the docs →

Describe a block, get a block

Blockstudio's file-based architecture means AI coding agents can scaffold blocks, pages, and patterns from a single prompt. No GUI, no database, just files.

~/starter-theme
❯ Create a pricing block with three tiers,
a toggle for monthly/annual billing, and
a CTA button for each tier.
✓ Created blockstudio/pricing/block.json
✓ Created blockstudio/pricing/index.php
✓ Created blockstudio/pricing/style.css
❯ Now create a pricing page with a hero
and FAQ section.
✓ Created pages/pricing/page.json
✓ Created pages/pricing/pricing.php
5 files written
Files
blockstudio/
├── pricing/NEW
├── block.json
├── index.php
└── style.css
├── hero/
├── block.json
└── index.php
└── testimonials/
pages/
├── pricing/NEW
├── page.json
└── pricing.php
├── about/
└── contact/

File-based everything

Blocks, pages, patterns, and extensions are directories with JSON configs and template files. AI agents read and write files natively.

Zero database config

No admin panels to click through. Every setting is a JSON key. Agents can scaffold a complete block library without touching a browser.

Predictable structure

Every block follows the same convention: block.json for config, a template for markup, an optional stylesheet. Agents learn the pattern once.

Works with every AI coding tool

Any agent that can read and write files works with Blockstudio out of the box.

Claude Code
Codex CLI
Gemini CLI
Cursor
Windsurf
Amp

3x fewer tokens per page

Agents write plain HTML. Blockstudio's parser automatically converts it to serialized WordPress block markup on sync. Less to generate, less to get wrong.

Blockstudio

What agents write

~370 tokens
<h1>Build Websites That Convert</h1>
<p>The all-in-one platform for creating
beautiful, high-performance landing pages.</p>

<block name="core/columns">
  <block name="core/column">
    <h3>Lightning Fast</h3>
    <p>Pages load in under one second.</p>
  </block>
  <block name="core/column">
    <h3>Easy to Use</h3>
    <p>No technical skills required.</p>
  </block>
  <block name="core/column">
    <h3>SEO Optimized</h3>
    <p>Built-in best practices from day one.</p>
  </block>
</block>

<img src="/dashboard.jpg" alt="Dashboard" />

<ul>
  <li>Drag-and-drop editor</li>
  <li>A/B testing built in</li>
  <li>Analytics dashboard</li>
</ul>

WordPress

What the parser generates

~1,100 tokens
<!-- wp:heading {"level":1} -->
<h1 class="wp-block-heading">Build Websites
That Convert</h1>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The all-in-one platform for creating
beautiful, high-performance landing pages.</p>
<!-- /wp:paragraph -->

<!-- wp:columns -->
<div class="wp-block-columns">
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Lightning Fast</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Pages load in under one second.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Easy to Use</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>No technical skills required.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
<!-- wp:column -->
<div class="wp-block-column">
<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">SEO Optimized</h3>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Built-in best practices from day one.</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:column -->
</div>
<!-- /wp:columns -->

<!-- wp:image {"url":"/dashboard.jpg",
"alt":"Dashboard"} -->
<figure class="wp-block-image">
<img src="/dashboard.jpg" alt="Dashboard"/>
</figure>
<!-- /wp:image -->

<!-- wp:list {"ordered":false} -->
<ul class="wp-block-list">
<!-- wp:list-item -->
<li>Drag-and-drop editor</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>A/B testing built in</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>Analytics dashboard</li>
<!-- /wp:list-item -->
</ul>
<!-- /wp:list -->

Less output to generate

Agents write plain HTML without comment delimiters, duplicated classes, or wrapper markup. The parser handles the rest.

Less to get wrong

Block validation fails on a single mismatched attribute. With HTML input, the parser guarantees valid output every time.

Faster and cheaper

Fewer output tokens means faster responses and lower API costs across every model and provider.

48k tokens of structured context

A single file with the complete documentation and all JSON schemas, built for LLM coding assistants.

Everything an agent needs to know

Blockstudio ships a pre-built blockstudio-llm.txt file containing the complete documentation, every field type, template pattern, and configuration option. Schemas are deduplicated to keep the token count low.

Point your AI tool to the URL and every prompt has full context about Blockstudio. Works with Claude Code, Cursor, GitHub Copilot, and any tool that accepts a URL or file.

AI integration docs →
# Blockstudio
Context for LLM coding assistants.

## Blocks
Blocks are defined by a directory containing
a block.json and a template file (PHP, Twig,
or Blade). Fields go in the "blockstudio" key.

## 30+ Field Types
text, textarea, number, email, url, password,
range, select, toggle, checkbox, radio, image,
gallery, file, color, date, link, richtext,
code, repeater, group, message, tab, accordion,
relationship, taxonomy, user, post_object ...

## Schemas
```json
{"definitions":{"Attribute":{"anyOf":[...]}}}
```

## Template Variables
All field values are available as top-level
variables: $text, $image, $repeater, etc.

~48,000 tokens, fits in any modern context.

Built for the AI workflow

Blocks, pages, patterns, settings. Everything is a file an agent can read, write, and modify.

Two files per block

A JSON config and a template. That's the entire block. Small surface area means agents get it right on the first try.

30+ field types

Text, image, repeater, color, date, relationship, and more. All defined in JSON, all available as template variables.

JSON Schema validation

Every config file has a JSON Schema. Agents are great at following schema rules, so blocks come out valid on the first try.

Auto-registration

Drop files in a directory and blocks register themselves. No manual registration, no config files to update.

Canvas live preview

Blocks render in a live preview canvas inside the editor. See the result the moment files are saved.

Tailwind built-in

Tailwind v4 compiles per-block with zero config. Agents write utility classes and styles just work.

Element Grabber

Cmd+click any element on the frontend to copy its HTML and file path. Paste it into your AI chat as instant context.

HTML to blocks

Pages and patterns are plain HTML files. Blockstudio converts them to native WordPress blocks automatically.

Plus

The official extension kit

Premium site templates, AI system instructions, and a private Discord community. One-time purchase, lifetime updates.

  • 150+ site templates
  • AI system instructions
  • Lifetime updates
  • Private Discord community
Get Plus →
block.json
{"name": "starter/hero","title": "Hero","blockstudio": { ... }}
index.php
style.css
150+ templates includedPlus