# Playground — Examples
> Hands-on runs with the Playground: build a component, test a CSS effect, try a JS snippet, prototype Bootstrap, work with SCSS, and export your work.
Source: https://www.jpkc.com/db/en/tools/playground/examples/
Back to the overview: [Playground](https://www.jpkc.com/db/en/tools/playground/) · Open the tool: [www.jpkc.com/tools/playground/](https://www.jpkc.com/tools/playground/)
The [manual](https://www.jpkc.com/db/en/tools/playground/manual/) explains every feature in detail. This page adds **concrete workflows**: typical tasks, walked through step by step. The tool's interface is in English, so button and label names are given in their original English spelling.
## Example 1: Build a small component
You want to assemble a self-contained UI component — say, a profile card — quickly.
1. Open the [Playground](https://www.jpkc.com/tools/playground/) and clear the three panels with **Clear** (or build straight on top of the demo example).
2. The **HTML** panel takes only the body content — no ``/`` scaffold:
```html
Ada Lovelace
First programmer
```
3. The styles go into the **CSS** panel:
```css
.card {
display: flex;
gap: 1rem;
align-items: center;
padding: 1rem;
border: 1px solid #ddd;
border-radius: 12px;
font-family: system-ui, sans-serif;
}
.card img { border-radius: 50%; }
.card h2 { margin: 0 0 0.25rem; font-size: 1.1rem; }
.card p { margin: 0; color: #666; }
```
4. Because **Live** is active, the card appears in the preview on the right immediately — every change lands after a short delay. Once it looks right, copy HTML and CSS into your project with **Copy**.
## Example 2: Test a CSS effect
You want to try a hover or transition effect in isolation, without hunting for it in a large codebase.
1. Leave the JS panel empty and hide it via the **JS** panel toggle if you like — that gives CSS and the preview more room.
2. Build a minimal test object in the **HTML** panel, e.g. ``.
3. Experiment with the effect in the **CSS** panel:
```css
.cta {
padding: 0.8rem 1.6rem;
border: none;
border-radius: 8px;
background: #0d6efd;
color: #fff;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cta:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
}
```
4. Hover over the button in the **Rendered Preview** — the effect runs live. Use the **Zoom** in the preview header to enlarge the detail and judge the shadow nuances. That's how you dial in values (duration, offset, color) until it's right.
## Example 3: Try out a JS snippet
You want to verify a piece of JavaScript that manipulates the DOM.
1. A target and a trigger in the **HTML** panel:
```html
```
2. The logic in the **JavaScript** panel. Top-level functions are global, which is why the `onclick` handler from the HTML works directly:
```js
let n = 0;
function count() {
n += 1;
document.getElementById( 'n' ).textContent = n;
}
```
3. Click the button in the preview — the counter goes up. Your code runs at the end of the ``, so the DOM is already there; you don't need `DOMContentLoaded`.
4. If you introduce a bug on purpose, the preview stays up instead of crashing: open the **browser console** and you'll find the message with the `[Playground JS]` prefix. That's how you debug snippets without setting up a project.
## Example 4: Prototype a Bootstrap component
You want to try a Bootstrap component (e.g. a modal) without wiring up Bootstrap yourself.
1. Open the **Assets** dropdown and enable **Bootstrap CSS** *and* **Bootstrap JS** — interactive components like modals need both. The counter badge on the button now shows 2.
2. Optionally add **Bootstrap Icons** and try the dark theme via **Dark Mode** (only selectable when Bootstrap CSS is on).
3. The **HTML** panel takes the Bootstrap markup — a trigger button plus the modal structure with `data-bs-toggle="modal"`. Because Bootstrap JS is injected into the preview's ``, the modal works on click right away.
4. That lets you check in seconds whether a component does what you need — before you pull Bootstrap into your real project. More on the available libraries is in the [manual under "Optional assets"](https://www.jpkc.com/db/en/tools/playground/manual/#optional-assets).
## Example 5: Try out SCSS
You want to test SCSS features (nesting, variables) without setting up a local Sass compiler.
1. Click the **SCSS** switch in the **CSS** panel header — the label changes to `SCSS`. On the first run the compiler is briefly loaded ("Loading SCSS compiler…").
2. Write SCSS, e.g. with a variable and nesting:
```scss
$accent: #d6336c;
.note {
padding: 1rem;
border-left: 4px solid $accent;
h3 { color: $accent; margin-top: 0; }
}
```
3. The Playground compiles the SCSS to CSS client-side before every preview — you see the result immediately. Switch the preview header to **HTML Source** and you'll recognize the compiled CSS in the `