Web Studio Runs on your device ← All tools

Web Studio

Build the web.Right in your browser.

Eight tools for writing code, inspecting your pages and creating beautiful interfaces. No installs. No uploads. Just you and your ideas.

Your games

Code editor HTML, CSS and JS with live preview. Open tool CSS inspector Format, find conflicts and support gaps. Open tool CSS animator Visual keyframes and easing curves. Open tool DOM inspector Explore HTML and computed CSS. Open tool Wireframe studio Responsive layouts and screen flows. Open tool CSS token generator Fluid type, spacing and OKLCH ramps. Open tool CSS pattern builder 955 adjustable, exportable CSS patterns. Open tool Shape divider studio SVG section dividers and decorative underlines. Open tool
Not sure where to start? Let the randomizer pick a tool for you. Surprise me

Write and preview HTML, CSS and JavaScript live

A live coding playground: edit HTML, CSS and JavaScript side by side and watch the result render instantly — perfect for prototypes, experiments and learning.

  1. Write or paste code into the HTML, CSS and JS panels.
  2. The preview updates as you type.
  3. Use the console output to debug JavaScript.
  4. Copy or download your work when it is ready.

Tip: Everything runs sandboxed in your own browser — experiment without fear.

Analyze a stylesheet for conflicts and support issues

Cascade Lens parses your CSS and reports specificity conflicts, duplicated rules and properties with limited browser support, so you can clean up a stylesheet with confidence.

  1. Paste your CSS or load a stylesheet file.
  2. Run the analysis and review the report: conflicting selectors, specificity scores and overridden rules.
  3. Check the browser-support warnings for any property that may need a fallback.
  4. Fix the issues in your source and re-run until the report is clean.

Tip: Two rules with equal specificity are resolved by source order — the report flags these because they break silently when files are reordered.

Create CSS animations visually

Design keyframe animations with live preview and export clean CSS you can paste into any project.

  1. Pick the element property you want to animate — position, scale, rotation, opacity or color.
  2. Set keyframes along the timeline and adjust values for each.
  3. Choose duration, easing and repeat behavior, watching the live preview.
  4. Copy the generated @keyframes CSS into your stylesheet.

Tip: Prefer transform and opacity for smooth animations — browsers can composite them without re-layout.

Understand any page's HTML structure

Paste HTML and explore its DOM tree interactively: expand nodes, inspect attributes, and understand how a document is structured without opening browser devtools.

  1. Paste an HTML snippet or a full document.
  2. Browse the parsed tree; expand and collapse nodes to navigate.
  3. Select a node to see its attributes and text content.
  4. Use the search to jump to specific tags, classes or ids.

Tip: Great for debugging scraped or generated HTML where devtools are not available.

Sketch interface wireframes fast

Lay out low-fidelity wireframes for websites and apps: drag common UI blocks onto a canvas, arrange screens, and export your sketches.

  1. Create a frame for the screen size you are designing.
  2. Drag UI elements — headers, buttons, text blocks, images — onto the canvas.
  3. Arrange and resize until the structure reads clearly.
  4. Duplicate frames to explore variations, then export.

Tip: Keep wireframes gray and ugly on purpose — the moment they look pretty, feedback shifts from structure to colors.

Generate secure random tokens and passwords

Create cryptographically secure random passwords, API tokens, PINs and passphrases with configurable length and character sets — generated on your device.

  1. Choose what to generate: password, token, PIN or passphrase.
  2. Set the length and which character classes to include.
  3. Generate; entropy comes from your browser's cryptographic random source.
  4. Copy the result into your password manager.

Tip: Length is the main driver of strength: a 20-character token from a modest alphabet beats a short one from a fancy alphabet.