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
Learn by making a small change

Understanding, one experiment at a time.

Practical guides with working examples. Read a little, try a little, and find out what changes.

6 min · Hands-on guide

Build a grid without guessing

Start with content, choose tracks, and make a layout that survives a narrow viewport.

Read and experiment
5 min · Hands-on guide

Give shadows a job to do

Use contact and ambient layers to separate surfaces without a muddy halo.

Read and experiment
7 min · Hands-on guide

Choose merge or rebase deliberately

Understand which parent links and commit IDs change before rewriting a branch.

Read and experiment
6 min · Hands-on guide

Test the spaces between devices

Look for content breakpoints instead of designing only for a list of phones.

Read and experiment
5 min · Hands-on guide

Make fluid type that knows when to stop

Derive a clamp expression from two sizes and two viewport widths.

Read and experiment
6 min · Hands-on guide

Prototype locally, share thoughtfully

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

Read and experiment