Browse and customize common UI components (buttons, cards, modals, navbars) with live code preview.
This tool is a catalog of everyday UI pieces: buttons, cards, modals, navbars, and similar building blocks. You pick a component from the gallery, change its properties with the customization controls, and the rendered component and its code update together in the preview. What you get out is the component as you configured it, not a full page. The common misunderstanding is context: the preview is styled by this tool's defaults, so once you paste the code into your site, your own fonts, colors, and layout determine how it actually looks.
Components are grouped by kind - buttons, cards, modals, navbars, and similar building blocks. Selecting one loads it into the preview with its code shown alongside. The customization controls are specific to each kind: the options offered for a button differ from those for a modal, because each component has a different structure. Every change you make updates the rendered component and the code together.
The rendered component and the code panel show the same state at all times: each customization appears in both at once. The preview is the immediate visual check, and the code panel shows the markup and styles that produce that exact appearance, ready to take into your own project. The tool runs entirely in the browser, so nothing you configure is uploaded anywhere.
Not necessarily. The preview is styled by this tool's defaults, and once you paste the code into your project it inherits your site's stylesheet - fonts, colors, spacing, and container width all have an effect. Treat the preview as a faithful rendering of the code as written, then check the component on your own page and adjust.
Yes. The code panel always reflects the current controls, so you can adjust a component and copy again as often as you like. The output is plain component markup and styles, so you can also edit it by hand once it is in your project. The tool runs entirely in the browser, and nothing you configure is uploaded.
The behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.