codipry.

Keyboard shortcuts

Use Ctrl on Windows/Linux or Command on macOS. Shortcuts respect focused text fields.

Ctrl/⌘ K
Open or close tool search
?
Open this reference outside text inputs
Escape
Close the active dialog
Ctrl/⌘ S
Save the current Playground project
Ctrl/⌘ Enter
Run the Playground preview
Tab
Move between controls; inside code typing, insert two spaces
Shift Tab
Move to the previous control

Monaco also provides its own command palette. Browser and operating-system shortcuts can take priority.

Start creating
Frontend PlaygroundcodeResponsive LabcodeGradient GeneratordesignBox Shadow GeneratordesignText Shadow GeneratordesignBorder Radius GeneratordesignFlexbox GeneratordesignCSS Grid GeneratordesignAnimation GeneratordesignGlassmorphism GeneratordesignClip Path GeneratordesignFluid Type GeneratordesignColor StudiodesignGit Command BuildergitGit VisualizergitMerge vs. RebasegitSQL Joins VisualizerdatabaseSQL Clause ExplorerdatabaseDatabase RelationshipsdatabaseSQL FormatterdatabaseSQL PlaygrounddatabaseTyping TestpracticeCode Typing TestpracticeJSON FormattercodeCSV / JSON ConvertercodeText DiffcodeRegex TestercodeEncoding ToolscodeHash GeneratorcodeTimestamp ConvertercodeCSS Transform GeneratordesignCSS Filter GeneratordesignDesign Token ExporterdesignGit Conflict TrainergitSQL Schema Explorerdatabase
A practical experiment

Prototype locally, share thoughtfully

Use isolated previews, review imported code, and keep a portable backup.

Keep the experiment small

A prototype should answer a question. Can this layout hold a longer title? Does a control communicate its state? What happens when a click changes text? A small browser experiment can answer without a new project setup.

Codipry edits source on its main page and runs output in a sandboxed frame without same-origin privileges. Your experiment cannot read the parent's document or main-origin browser storage.

Separate source from execution

Keep markup in HTML, styling in CSS and behavior in JavaScript. The JS editor is parsed in a worker, and common loops/functions receive a best-effort execution guard. HTML inline scripts are outside that instrumenter; prefer the separate JS field.

const button = document.querySelector("#try");
button.addEventListener("click", () => {
  button.textContent = "One small change.";
  console.info("The experiment responded.");
});

Stop removes the frame and its timers. Run creates a fresh document rather than retaining hidden globals. The console relays bounded text diagnostics from that isolated document.

Review what someone sends you

A file or share link is untrusted source, even from a familiar person. Imports and recovered drafts load with execution paused. Read the source before Run. Keep external resources off unless the experiment needs them.

The optional resource policy allows HTTPS scripts, styles, images and fonts. Providers receive those asset requests. Fetch/XHR, nested frames and form submissions remain blocked.

Share a link, not a secret

Share data lives in a compressed fragment, outside the HTTP request to the static host. Anyone with the full link can still decode it. Never include credentials, private customer information or source you cannot share.

If the project exceeds the link limit, export JSON or ZIP. Importing a file does not upload it.

A local save is not a backup

Browser storage can be cleared by you, the browser or the operating system. Export important work. Standalone HTML is convenient for a demo; project JSON restores editable source. Use Data & Storage for a full backup across tools.

Try the starter, change one line, export and re-import. The imported version stays paused until you explicitly run it.

Put the idea to work

Try the live example

Opening your local workspace…

The example loads on request so the guide stays quick to read. Open the full tool ↗