No install. No build step. No excuses.
Build the Web.
Write HTML, CSS & JS and see it render live across five synced viewports. Test accessibility, simulate vision conditions, and deploy to Netlify or Vercel — all from one tab, with no setup.
No install. No build step. No excuses.
Write HTML, CSS & JS and see it render live across five synced viewports. Test accessibility, simulate vision conditions, and deploy to Netlify or Vercel — all from one tab, with no setup.
No installs, no build step. Write HTML, CSS & JS, test accessibility, simulate vision conditions, and deploy — all from one tab.
Connect your own AI account — Claude or GPT. Todo tracking, web search, and one-click rewind checkpoints — all with full project context. Completely optional.
Your keyRun WCAG audits, check colour contrast, and test keyboard navigation — all built into the editor. Fix issues with one click via AI.
InclusiveSee your design through different eyes — colour blindness, glaucoma, cataracts, and more. Plus sensory filters for autism, dyslexia, and attention differences. Filters apply across every viewport at once, so you can compare side by side.
EmpathyCompare up to five viewports side by side — iPhone, iPad, Pixel, Galaxy, desktop. Clicks, scrolls, and edits sync across every frame, so you can spot responsive bugs the moment they appear.
5-up syncCode together in real time with a shared link. Fork any public project, propose changes back with merge requests — social coding built in.
Real-timePush to GitHub, deploy to Netlify, Vercel, or Neocities — all from inside the editor. No CLI needed.
DeployNo frameworks. No build step. No config. Just open a tab and build — with tools designed specifically for front-end prototyping that other editors simply don't have.
Connect Claude or GPT with your own API key. The AI has full project context and works in a continuous agentic loop — reading your code, making targeted edits, checking for errors, and iterating until it's right.
Dashboards, landing pages, apps, UI experiments — all built and published directly from Blnq.
Blnq exposes an MCP endpoint that lets AI agents read, write, and manage your project in real time. Claude, Cursor, Windsurf, or any MCP-compatible client can connect. See the full tool specification for details.
Claude Code — one command:
DYclaude mcp add --transport http blnq https://blnq.studio/mcpClaude Desktop, Cursor, Windsurf — drop this into your MCP config file (path varies by app):
{
"mcpServers": {
"blnq": {
"type": "http",
"url": "https://blnq.studio/mcp"
}
}
}Any other MCP-compatible client works too — blnq speaks the standard Streamable HTTP transport. See the full per-client setup guide for exact config paths and fallbacks.
Then just ask — once the agent has your ID, prompt it like any other tool:
Using blnq, build me a one-page portfolio:
sticky nav, hero with my name, three project
cards, contact section. Dark theme, no AI blue.Treat the MCP ID as a credential. Anyone with it can read and write your project while the tab is open. Close the tab to revoke; the ID is freed after a short grace period so brief network blips (wifi → LTE, sleep/wake) survive.
Once connected, AI agents can interact with your project in real time:
Blnq supports Google Labs' DESIGN.md format — one file at the project root that declares your palette, typography, spacing, and radii as YAML tokens. Drop it in and blnq auto-compiles the tokens into CSS custom properties on :root, injects them into the preview, and tells the AI what's in the palette so it references var(--color-primary) instead of inventing hex codes.
YAML frontmatter between --- fences. Blocks for colors, typography, spacing, rounded. A markdown body for rationale.
---
name: Heritage
colors:
primary: "#1A1C1E"
accent: "#B8422E"
neutral: "#F7F5F2"
typography:
h1:
fontFamily: Public Sans
fontSize: 3rem
body:
fontFamily: Public Sans
fontSize: 1rem
spacing:
sm: 8px
md: 16px
lg: 32px
rounded:
sm: 4px
md: 8px
---
## Overview
Editorial gravitas — typography-led,
restrained palette, generous whitespace.Ask the AI to "set up a design system" and it creates the file for you. Edit colours visually from the palette swatches in the file explorer.
Everything below happens automatically the moment the file exists — no build step, no imports, no configuration.
--color-primary, --spacing-md, --radius-sm, --type-h1-font-size on :root — use them directly in any CSS file
var(--color-*) instead of inventing hex codes, and adds new tokens to DESIGN.md when it needs them
Our vision filters aren't just for the editor. Install the Chrome extension to simulate colour blindness, glaucoma, macular degeneration, cataracts, and more — on any webpage.
Grab the zip file below and extract it to a folder on your machine.
Navigate to chrome://extensions and turn on Developer mode using the toggle in the top right.
Click Load unpacked and select the extracted folder. The Blnq eyes icon will appear in your toolbar.
Click the icon on any webpage and choose a filter. The page will update instantly — move your mouse to see how glaucoma and macular degeneration follow your gaze.
Start from scratch or describe your idea and let AI give you a head start.
See what the community is shipping — fork anything that catches your eye and make it your own.
jd
mn
anonymous