Design Lab

Prototype export layouts against a built-in sample preview, with no login required. Write CSS in Style, write DOM-transforming JavaScript in Script, then export a submission JSON once the result is worth reviewing.

Loading sample design data...

Preview

The left side is generated entirely from the default Style and Script text using built-in sample data, so anyone can experiment immediately.

Preparing the sample preview...

Inputs

Use ctx in your script. The default textareas rebuild the current sample export example from scratch, and you can replace them however you want.

Style CSS applied inside the preview frame

Script JavaScript body executed as new Function("ctx", code)

Available variables

ctx.rootThe preview root element inside the iframe document.

ctx.profileSample user profile object.

ctx.payloadThe scraped score payload with rating, level, score list, and more.

ctx.breakdownComputed old/new best breakdown and final rating.

ctx.entriesCombined export entries.

ctx.oldEntries / ctx.newEntriesSeparated 30/20 lists.

ctx.helpersformatNumber, formatScore, formatRankLabel, escapeHtml, formatDate.

ctx.jacket.buildUrl(...)Turns a jacket asset path into the full image URL.

ctx.document / ctx.windowThe preview frame document and window for deeper changes.