Early research preview — this project is an experiment and may change significantly.
Bloktastic

Hey Blok Lovers

What if a component registry shipped prompts instead of code?

A Storyblok registry that ships schemas and prompts instead of framework-specific code. You bring the context, AI does the rest.

Try it out Browse Storyblok Packages

Launch new Storyblok projects in minutes

Push editor-ready schemas without setup drag

Generate frontend code for any stack

Built for agencies, freelancers, and in-house teams

Components

25

Plugins

0

One-Command Quickstart

npx -y bloktastic@latest init

Then run bloktastic add @bloktastic/hero to install your first blok.

Fast workflow for every team type

One CLI for schemas, prompts, and code generation. Same flow whether you're solo or in a team.

Terminal

bash

# install CLI
npm install -g bloktastic

# initialize your project
bloktastic init

# add a hero component
bloktastic add @bloktastic/hero

# generate code prompt only
bloktastic add @bloktastic/hero --prompt-only

How it works

  1. 1. Select a package Pick components, presets, and plugins that match your Storyblok use case.
  2. 2. Install & generate with your agent The bloktastic skill handles init, search, add, and code generation in one flow.
  3. 3. Get your code Code is generated matching your exact stack — no copy-paste needed.

AI Coding Agents

Skip the manual steps

Install the Bloktastic skill and let your AI agent handle setup, discovery, installation, and code generation in one flow. No copy-paste needed. 

npx skills add https://github.com/bartundmett/bloktastic --skill bloktastic

Then run /bloktastic in your agent.

Agent Skill Guide

How Bloktastic works

Bloktastic is a prompt-first system: define a solid Storyblok schema as your content contract, then pair it with a structured implementation prompt. This gives marketers predictable fields and gives developers stack-specific output without template lock-in.

1. Schema Contract

Uses the Storyblok schema definitions you already know and love, as one reliable source of truth for field setup across your projects.

schema.json (excerpt)

json

{
  "$bloktastic": { "version": "1.0.0" },
  "name": "hero",
  "display_name": "Hero Section",
  "is_nestable": true,
  "schema": {
    "headline": { "type": "text", "required": true, "pos": 0 },
    "subline": { "type": "textarea", "pos": 1 },
    "cta_buttons": {
      "type": "bloks",
      "restrict_components": true,
      "component_whitelist": ["button"],
      "maximum": 2,
      "pos": 2
    }
  },
  "preview_field": "headline"
}

2. Prompt Contract

Encodes intent, a11y, and edge cases so AI can generate code that matches your exact stack and team style.

prompt.md (excerpt)

md

## Purpose
Build a production-ready Hero component for our frontend stack.

## Storyblok Schema Fields
- headline (required)
- subline (optional)
- cta_buttons (0-2)

## Visual Requirements
- Responsive layout
- Strong contrast
- Graceful empty states

## Accessibility
- Semantic heading usage
- Keyboard focus styles
- CTA labels are descriptive

Find the right blok

Search by name, title, or tag without leaving the homepage.

Open full directory

Showing 6 of 25 bloks

@bloktastic/accordion

v1.0.0

Accordion

Expandable accordion component for FAQs, feature details, and progressive disclosure content.

Content stable
#accordion#faq#content +1 more

@bloktastic/accordion-item

v1.0.0

Accordion Item

Single item for accordion content with title, rich text body, and optional icon.

Content stable
#accordion#item#faq +1 more

@bloktastic/announcement-bar

v1.0.0

Announcement Bar

Slim top banner for product announcements, campaign messages, and urgent notices.

Sections stable
#banner#announcement#marketing +1 more

@bloktastic/blog-grid

v1.0.0

Blog Grid

Recent articles section with teaser cards for content marketing pages.

Sections stable
#blog#articles#content +1 more

@bloktastic/button

v1.0.0

Button

Versatile call-to-action button with variants, sizes, icon support, and accessible states.

Content stable
#button#cta#action +1 more

@bloktastic/contact-section

v1.0.0

Contact Section

Contact form section with heading, descriptive text, and configurable fields.

Forms stable
#contact#form#lead +1 more

Starter presets

Curated bundles for agency delivery, freelancer speed, and consistent team onboarding.

Browse presets

@bloktastic/blog-starter

v1.0.0

Blog Starter Preset

Starter bundle for editorial pages with hero, teaser cards, and accordions.

Preset stable
#preset#starter#blog

@bloktastic/marketing-landing-starter

v1.0.0

Marketing Landing Starter

Starter preset for modern marketing and landing pages with navigation, social proof, pricing, FAQ, and footer sections.

Preset stable
#marketing#landing-page#starter

@bloktastic/saas-growth-starter

v1.0.0

SaaS Growth Starter

Preset focused on SaaS conversion pages with features, pricing tiers, testimonials, lead capture, and contact forms.

Preset stable
#saas#growth#conversion +1 more

Like the idea?

Contribute to make this a reality

We use a clear submission flow inspired by mature ecosystems: package setup, complete details, validation, review, and publish. Start with one package and grow your contributor footprint over time.

Contribution Guide Open GitHub

Step 1

Create your package

Start with a component or plugin scaffold, then fill manifest, schema, prompt, and README files.

Step 2

Complete details

Add clear metadata, tags, and usage context so others can discover and install your package quickly.

Step 3

Validate and submit

Run local validation, then open a pull request with examples, screenshots, or generated output.

Step 4

Review and publish

After review passes, your package lands in the registry and becomes installable by the community.

Contributor Quickstart

# scaffold a new package
bloktastic create component my-component --namespace your-github

# or scaffold a plugin
bloktastic create plugin my-plugin --namespace your-github

# validate before opening a PR
bloktastic validate registry/components/my-component

Need plugins too?

Explore the plugin directory when you want integrations, automation, and editor extensions for your Storyblok setup.

Browse plugins