Public testing is open

Open Beta Testing

Windblocks is currently available as a beta test version. The core experience is usable, but features, workflows and generated output may still change while development continues.

Design to code

Build visually. Continue in code.

Windblocks is a visual web builder for creating pages, layouts, components and forms — with a structured Next.js and TypeScript project as the final handoff to development.

Start building See how it works

Visual workflowNext.jsTypeScriptTailwind CSSNo source lock-in

windblocks / structure

Structure

Home / Hero section

Area / content

Area / visual

12-column grid2 areasHero

Open beta testing

Beta version · Active development

You are using an open beta version of Windblocks.

The core builder is already functional and open for testing, but this is not yet a final production release. Some parts of the interface, component system and generated output may change, and you may encounter unfinished behaviour while the product evolves. Feedback from beta testing helps shape the next iterations.

Open betaExpect iterationFeatures may changeActive development

More than a page builder

No-code where it saves time. Real code where development continues.

Windblocks does not try to replace application development. It removes repetitive setup work before development begins: page structure, responsive layouts, reusable components, forms, project defaults and export configuration.

Build

Compose the interface visually.

Prepare

Define structure, defaults and component contracts.

Export

Continue inside a normal Next.js codebase.

One project · four views

Work at the right level for the task.

Content editing, layout structure, responsive testing and source generation are separate views of the same project model — not separate copies of the page.

Content

Edit component content and page data without losing sight of the final interface.

Structure

Work with sections, areas and the responsive grid that defines the page architecture.

Preview

Test the page inside a real isolated viewport so responsive breakpoints behave as expected.

Code

Inspect project data and generate the source project that continues outside the builder.

Structure first

Structure pages before writing them.

Pages are composed from sections, sections define responsive areas, and areas hold components. The same structure later gives the exporter enough context to produce readable source instead of anonymous markup.

Why section names matter

Names such as Hero, Features and Contact become useful source-level identifiers during export.

Explore structure and grid

Page

route, metadata, page settings

Sections

named source-level page blocks

Areas

responsive grid placement

Components

content and reusable UI

Component system

Start prepared. Bring third-party UI. Make it part of the project.

Windblocks is not limited to its built-in catalog. Use prepared components, create your own, or bring compatible HTML and Tailwind markup from third-party component sources and turn it into a reusable, export-aware project component.

Complex01

Prepared for sections

Larger reusable blocks for hero areas, feature sections, pricing, contact and other page-level structures.

Simple02

Prepared for areas

Smaller content components that fit inside the grid and can be composed into custom layouts.

Project03

Reusable inside your project

Turn supported HTML into project components with mapped props, reusable defaults and export-aware behaviour.

Third-party04

Bring compatible UI with you

Paste compatible HTML and Tailwind component markup from third-party sources, detect editable values and save the result as a reusable project component.

Third-party components

Import the markup, then make the component yours.

Start with an HTML container, paste compatible third-party HTML or Tailwind markup, let Windblocks build the editable element tree, detect values that should become props, then save the result into the project library for reuse.

Project component settings

Defaults before overrides.

Configure project-wide appearance and default values once. Instance-level fine tuning remains available, but keeping the shared behaviour at project level produces cleaner exported source.

TSX action mapping

Define the contract, not invented logic.

Map event attributes so the exporter knows which element needs a callback and client boundary. Windblocks wires the component contract; application-specific handler logic stays with the developer.

Forms

Build forms visually. Keep typed validation.

Compose fields and responsive rows, configure validation and export form structures built on React Hook Form and Zod.

react-hook-formzodtyped validation

Explore forms

Application export

The builder is temporary. Your source code is not.

Generate a Next.js App Router project with configurable source layout, code quality tooling, libraries, error pages and only the components the project actually uses.

src/

app/

components/

Hero.tsx

Features.tsx

lib/

...

See generated output

Start with a visual system, not an empty repository.

Build the repetitive foundation visually, export it, then spend development time on the parts that are actually unique to your application.

Start building How it works