Current generator
Fluid type scale
Current tokens0
Export tokens0
OutputCSS
| Token | Value (math) | Details | Action |
|---|
Write HTML, CSS and JavaScript with live preview, format and audit CSS for specificity and browser support, build keyframe animations visually, inspect any element's DOM and computed styles, wireframe responsive layouts, and generate accessible CSS design tokens. Everything runs in your browser with no account and nothing uploaded, and your work in each tool is kept while you switch between them.
Privacy note: image data stays on your device. The page itself still loads fonts and anonymous analytics from third-party services, so standard details like your IP address and page URL may be visible to them — as with any website.
A private HTML, CSS and JavaScript editor with live preview, console, formatting and responsive device modes, all in your browser.
WebForge Studio needs an internet connection to load its code-editor libraries from the CDN. Check your connection or content-blocking settings, then reload this page. Your locally saved projects are not affected.
A live coding playground: edit HTML, CSS and JavaScript side by side and watch the result render instantly — perfect for prototypes, experiments and learning.
Tip: Everything runs sandboxed in your own browser — experiment without fear.
Paste CSS to format it, reveal specificity conflicts, flag browser-support gaps and get modern alternatives. Runs privately in your browser.
Paste CSS. See what the browser actually keeps.
Nothing analyzed yet.
Paste a stylesheet on the left and press Analyze CSS — or start with the sample to see how conflicts are flagged.
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.
Tip: Two rules with equal specificity are resolved by source order — the report flags these because they break silently when files are reordered.
Generate CSS keyframe animations in your browser: presets, a visual cubic-bezier editor, scroll-driven effects and copy-ready code.
Design keyframe animations with live preview and export clean CSS you can paste into any project.
Tip: Prefer transform and opacity for smooth animations — browsers can composite them without re-layout.
Paste or upload HTML and DOM Inspector builds a live element tree. Click any node to see its code, classes and every CSS rule that applies, plus an accessibility score.
Paste or upload HTML and DOM Inspector builds a live element tree. Click any node to see its code, IDs, classes and every CSS rule that applies — with overridden and invalid declarations clearly flagged — plus an accessibility & quality score. Includes a full kit of developer tools.
Everything runs on your device — nothing is uploadedPaste a page's HTML (View Source → copy), or drop an .html file here. A URL can't be fetched in the browser without a server, so DOM Inspector works on the markup you provide — keeping everything private.
Parses the <head> and content of the HTML you loaded in the Inspector. For live IP / hosting / server-tech lookups, those require a server request to the remote site — see the note below.
Load HTML and run the analysis to preview how this page looks in search results and social cards.
IP address, web-hosting technology and live server headers can't be read in the browser — the same-origin policy blocks it, and reading them needs a server to fetch the remote site. DOM Inspector keeps everything on your device by default. If you want those, open a dedicated third-party service in a new tab — this sends the domain to them, not to Azad.
Enter one selector per line to see its (ids, classes, elements) weight and which one wins.
Decodes header & payload locally. Signature is not verified (that needs the secret) — never paste production secrets.
Paste HTML and explore its DOM tree interactively: expand nodes, inspect attributes, and understand how a document is structured without opening browser devtools.
Tip: Great for debugging scraped or generated HTML where devtools are not available.
Create responsive website and app wireframes, connect screens, test layouts, audit usability, and export your work entirely in your browser.
Sketch flexible website and app layouts, build reusable screens, connect simple interactions, test responsive ideas, and export editable project files—without uploading your work.
Wireframe Studio focuses on layout thinking rather than polished decoration. Projects, snapshots, and imported files remain in your browser until you choose an export.
Export a visual PNG or SVG, an editable Azad project JSON, or a simple HTML layout skeleton that can become the starting point for a real website.
Lay out low-fidelity wireframes for websites and apps: drag common UI blocks onto a canvas, arrange screens, and export your sketches.
Tip: Keep wireframes gray and ugly on purpose — the moment they look pretty, feedback shifts from structure to colors.
Generate accessible CSS design tokens in your browser: fluid type scales, spacing, radius and colour ramps with copy-ready output.
Fluid, semantic, accessible tokens for production-ready systems.
Current generator
| Token | Value (math) | Details | Action |
|---|
Create cryptographically secure random passwords, API tokens, PINs and passphrases with configurable length and character sets — generated on your device.
Tip: Length is the main driver of strength: a 20-character token from a modest alphabet beats a short one from a fancy alphabet.