JPKCom DB

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.

Back to the overview: Playground · Open the tool: www.jpkc.com/tools/playground/

The 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 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 <html>/<head> scaffold:
<article class="card">
    <img src="https://placehold.co/64" alt="Avatar" width="64" height="64">
    <div>
        <h2>Ada Lovelace</h2>
        <p>First programmer</p>
    </div>
</article>
  1. The styles go into the CSS panel:
.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; }
  1. 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. <button class="cta">Click me</button>.
  3. Experiment with the effect in the CSS panel:
.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);
}
  1. 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:
<button onclick="count()">Counter: <span id="n">0</span></button>
  1. The logic in the JavaScript panel. Top-level functions are global, which is why the onclick handler from the HTML works directly:
let n = 0;
function count() {
    n += 1;
    document.getElementById( 'n' ).textContent = n;
}
  1. Click the button in the preview — the counter goes up. Your code runs at the end of the <body>, so the DOM is already there; you don't need DOMContentLoaded.
  2. 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 <head>, 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".

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:
$accent: #d6336c;

.note {
    padding: 1rem;
    border-left: 4px solid $accent;
    h3 { color: $accent; margin-top: 0; }
}
  1. 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 <style> block.
  2. If you introduce an SCSS syntax error, nothing breaks: an error message with a line number appears, and the preview shows a CSS comment with the error text. That's how you find the error without touching the console.

Example 6: Save the state and hand it over as a file

You've built something you want to keep or send to someone.

  1. Keep it inside the Playground: open Snippets, enter a name, and click Save. The state (HTML, CSS, JS, CSS mode, assets) is now stored as a named snippet in the browser; bring it back any time with Load. Up to eight snippets are possible.
  2. Save or share it as a standalone file: click Export HTML. You get a playground.html — a complete document that runs in any browser, with your code and the active assets.
  3. Read it back in: use Import HTML to load a previously exported file back into the editors; the asset selection is restored too. That way a colleague can build on your state without anything going through a server.
  4. Note: only files exported from the Playground (they carry invisible markers) can be imported — arbitrary helper HTML is rejected. Details are in the manual under "Export and import".

Go deeper: the manual for every feature and every limit, the tips & tricks for strategy and pitfalls. You can try all of it directly in the tool.