I Built a Programming Language That Lets You Write Websites in Plain English

No HTML. No CSS classes. No build step complexity. Just describe what you want, get production-ready code.

Weave pages like you’d knit your sweater. Stay warm! ❤️

Sometime ago, I released Wisp – a zero-dependency UI engine that automatically styles semantic HTML. The response was incredible. Developers loved that they could write clean, accessible markup and have it look professionally designed without touching CSS.

But something kept bothering me.

Wisp solved the styling problem, but it didn’t solve the authoring problem.

You still needed to know HTML. You still had to remember which tags to use, when to use vs , how to structure a hero section properly for accessibility. For developers, that’s second nature. But for content creators, marketers, and domain experts who just want to build a landing page?

That’s a massive barrier.

So I built Weave – a natural language interface that turns plain English descriptions into semantic HTML that Wisp (or any other styling engine) can work with.

Think of it as the missing piece: Weave handles the authoring, Wisp handles the styling, and standard HTML sits in the middle as the universal interface.

The “Aha” Moment

Here’s what writing a landing page looks like with Weave:

A page called "Helio Labs"
  With a hero
    Showing "Launch faster with Weave"
    With subtitle "Write structure in plain English, ship full HTML"
    With a primary button "Start Building"
  With features
    Having 3 features:
      "Fast authoring" with description "No class-level styling setup needed"
      "Deterministic output" with description "Compiler emits stable HTML"
      "Portable delivery" with description "Export static files instantly"
  Using modern theme

That’s it. No

soup. No class=”flex container mx-auto” noise. Just intent.

Run this through the Weave compiler, and you get:

<header role="banner" data-wisp-context="hero" data-wisp-priority="critical">
  <h1>Launch faster with Weave</h1>
  <p>Write structure in plain English, ship full HTML</p>
  <a href="#" role="button" class="primary" data-wisp-expand="auto">
    Start Building
  </a>
</header>

<main role="main">
  <section aria-labelledby="features-heading" 
           data-wisp-context="features" data-wisp-density="0.3">
    <h2 id="features-heading">Features</h2>
    <ul role="list">
      <li>
        <h3>Fast authoring</h3>
        <p>No class-level styling setup needed</p>
      </li>
      <!-- ... -->
    </ul>
  </section>
</main>

Notice the data-wisp-* attributes? Those are optimization hints for the Wisp runtime. If Wisp is present, you get automatic context-aware styling. If not, you still have perfectly valid, accessible HTML5 that works everywhere.

Why This Matters

The web development landscape has become increasingly complex. We’ve gone from simple HTML pages to build-step-heavy frameworks that require:

• Learning JSX/template syntax

• Understanding component hierarchies

• Managing state and props

• Configuring bundlers and transpilers

• Debugging CSS specificity wars

Weave inverts this complexity.

It asks: What if the barrier to creating web content was as low as writing a document outline?

The Weave Philosophy

1. Semantic fidelity first – Output must be valid, accessible HTML5
2. 2. Deterministic compilation – Same script, same output, every time
3. 3. Progressive disclosure – Simple cases are simple; complex cases are possible
4. 4. Wisp compatibility – Generated HTML maximizes context-detection for styling

How It Works: The Compiler Pipeline

Weave isn’t just a templating engine. It’s a proper compiler with a two-phase architecture:

Phase 1: Parsing (parseWeave)

• Lexer: Tokenizes input using indentation as block delimiters (Python-style off-side rule)

• Parser: Recursive descent parser with LL(1) lookahead, building a typed Abstract Syntax Tree (AST)

• Type checker: Validates semantic constraints (e.g., buttons must be inside sections, images need alt text)

Phase 2: Code Generation (compileWeave)

• AST traversal: Visitor pattern walk of the typed tree

• HTML emission: Generates semantic HTML5 with proper ARIA roles

• Wisp optimization: Injects data-wisp-* hints for enhanced styling

• Post-processing: Optional minification, pretty-printing, or CSS inlining

The result? Linear time complexity O(n) – compile times under 10ms for typical scripts.

Using Weave in Your Projects

As an npm Package

Install it:

npm install @rotsl/weave

Use it programmatically:

import { parseWeave, compileWeave } from '@rotsl/weave';

const script = `
A page called "My Product"
  With a hero
    Showing "Ship faster"
    With a primary button "Get Started"
  Using modern theme
`;

const ast = parseWeave(script);
const html = compileWeave(ast, { 
  wispHints: true,
  minify: false 
});

console.log(html);

Or use the CLI:

# Compile a script
weave build page.weave -o page.html

# Watch mode for development
weave watch ./pages/ --output ./dist/

# Validate without compiling
weave validate page.weave

The Visual Editor

For non-technical users, there’s a browser-based editor with:

• Split-pane interface: Script on the left, live preview on the right

• Real-time error highlighting: Catch mistakes as you type

• Wisp toggle: See raw vs. styled output instantly

• One-click export: Download HTML or full project bundles

The Weave-Wisp Ecosystem

Here’s where it gets interesting. Weave and Wisp form a complete content-to-presentation pipeline:

• Content teams iterate on copy and structure without developer bottlenecks

• Developers maintain styling logic independently of content

• Accessibility is built-in, not bolted-on (ARIA roles, heading hierarchies, alt text enforcement)

• Performance is optimal (zero runtime dependencies, ~5KB optional Wisp runtime)

Real-World Use Cases

1. Marketing Landing Pages

Your marketing team wants to A/B test three hero variants. Instead of filing Jira tickets and waiting for dev resources, they write:

A page called "Summer Campaign"
  With a hero
    Showing "Save 50% this summer"
    With a secondary button "View Plans"
  Using playful theme

Compile, deploy, done.

2. Documentation Sites

Technical writers focus on content hierarchy, not CSS frameworks. Weave enforces proper heading structure (h1 → h2 → h3) and generates table-of-contents-ready markup.

3. Rapid Prototyping

Validate page structure before investing in visual design. Weave’s six built-in themes (modern, minimal, corporate, playful, elegant, dark) give you instant visual feedback via Wisp integration.

4. Accessibility-First Development

Weave implements accessibility by construction:

• Automatic landmark roles (, )

• Enforced heading hierarchies

• Alt text validation for images

• Semantic button vs. link detection

You get WCAG 2.1 AA compliant markup without thinking about it.

Under the Hood: Technical Highlights

Grammar Design

Weave uses an indentation-sensitive grammar (EBNF) that’s formally specified yet reads like English:

section_declaration ::= "With" section_type { element_declaration }
section_type ::= "a" "hero" | "features" | "content" | ...
element_declaration ::= "Showing" string_literal 
                      | "With" "a" button_type "button" string_literal
                      | "Having" number "features" ":" feature_list

Error Handling That Doesn’t Suck

Instead of cryptic parser errors, Weave gives you:

Line numbers, context, and “did you mean” suggestions included.

Testing Strategy

Golden file testing ensures output stability:

• Parser tests: Input → expected AST JSON

• Compiler tests: AST → expected HTML snapshots

• Integration tests: End-to-end script → HTML → Wisp rendering

• Regression tests: Real-world complex scripts

The Road Ahead

Weave is just getting started. Here’s what’s coming:

Language Extensions:

• Component definitions (Define a component called “Testimonial”)

• Data binding (Showing data from “testimonials.json”)

• Conditional rendering (If user.isAuthenticated show…)

• Internationalization (In English: … In French: …)

Ecosystem Growth:

• VS Code extension with Language Server Protocol support

• GitHub Actions for CI/CD integration

• Markdown/Word import-export

• Figma design-to-Weave conversion

Research Directions:

• Learnability studies with non-technical users

• Automated WCAG 2.2 compliance validation

• Semantic preservation across Weave → HTML → Wisp pipeline

Get Started

🚀 Repository: github.com/rotsl/Weave

https://github.com/rotsl/Weave

📦 npm Package: @rotsl/weave

https://www.npmjs.com/package/@rotsl/weave

🌐 Live Editor: Try it in your browser

https://rotsl.github.io/Weave/

📄 Documentation: Full syntax reference and examples in the repo

🔗 Related: Wisp UI Engine (MIT Licensed) – the styling layer that completes the toolchain

https://github.com/rotsl/wisp

💾 Archived Version: DOI 10.5281/zenodo.18773305

Why I Built This

I believe the web should be writable by everyone, not just developers. We’ve made consuming content effortless, but creating it remains unnecessarily complex.

Weave is my attempt to lower that barrier. It’s not about replacing developers. It’s about empowering domain experts to create structured, accessible, performant web content without learning markup syntax.

If you can write a document outline, you can build a webpage.

That’s the future I want to build toward.

Questions? Thoughts? Open an issue on the repo. I’d love to hear how you’d use Weave in your workflow.

TL;DR

• Weave turns plain English into semantic HTML

• Works standalone or with Wisp for automatic styling

• Zero-config, deterministic, accessibility-first

• Use via npm (@rotsl/weave) or visual editor

• Perfect for content teams, rapid prototyping, and accessible web development

• Repo: github.com/rotsl/Weave