Vue Component Playground

Create and preview Vue 3 single-file components with Composition API support in real time.

Developer & Code

This tool is being rebuilt

The earlier version did not work as described, so it is switched off until a tested version replaces it at this same address.

Tell us what you need it for

Tools that work today

Svelte Component Playground Write and preview Svelte components with reactive declarations, stores, and live rendering.
CSS Container Query Playground Experiment with CSS container queries by resizing containers and seeing responsive style changes.
AES Encryption Playground Encrypt and decrypt text with AES-GCM, AES-CBC, and other algorithms using the Web Crypto API.
HTML / CSS / JS Playground Write HTML, CSS, and JavaScript in a split-pane editor with instant live preview and console output.
Web Component Builder Create native Web Components with Shadow DOM, custom elements, and slots with live preview.
CSS Flexbox Playground Experiment with Flexbox properties visually and copy the generated CSS code.

Web app by bee2.io

SCOUTb2

Website quality scanner

A Chrome extension that crawls a website and reports the accessibility, performance, and search problems it finds, page by page, with a shareable...

Open SCOUTb2

App by bee2.io

OhmQuill

Electrical toolkit

An offline electrical and workshop bench for component codes, wire sizing, threads, solar sizing, and unit and material math.

More Developer & Code tools

JSON Schema Validator Every error at its exact path, by the real rules.
CONTRIBUTING.md Generator Every command in it is one your project runs.
Changelog Generator from Git Log From commits to a checked changelog and version.
Commit Message Builder and Checker Proposed from the diff, checked against the spec.
README Generator from Your Project Your manifest, your scripts, your README.
AST Explorer Click the code, see the node; click the node, see the code.

What is it about?

What's missing Something isn't working Could be better Another tool I need Other

Your message (required)

0 / 2000 characters, at least 10

Name (optional)

Email (optional, for a reply)

Leave this field empty

Sent with your message: the address of this page, b2kit.com/tools/vue-component-playground/

Pressing Send gives your message and this page's address to bee2.io, the team behind b2KIT. Your name and email go along only if you enter them, and any reply goes to that email. How we handle feedback

Sent. Thank you.

This tool is being rebuilt

Help improve this tool Tell us what is missing, broken or worth adding. One minute.