Theme Lab

How the lab works, previews, snapshots, exporting, and recommended patterns.

The Theme Lab is an editor + live preview built for experimenting with MyOshi themes.

It is intentionally split into:

Base Template (demo profile HTML/CSS)
Custom CSS (what you paste into MyOshi)
Custom HTML (what you paste into MyOshi)
Preview (iframe, sandbox to view your work)
Snapshots (saved locally in your browser)
Auditing (check your work for errors)

Editors

The CSS/HTML editors include:

Syntax highlighting
Optional linting
A Format action (Prettier-powered) for cleaning up pasted code

The underlying preview stays sandboxed (no scripts execute), matching how MyOshi treats custom content.

Templates

Templates provide a realistic “profile” DOM so you can style immediately.

A template usually includes:

Base CSS that mirrors MyOshi’s default styling as closely as possible.
A realistic body structure (cards, headers, sections, etc.)
A .profile-custom-html mount point where your Custom HTML is injected

Templates are stored as files (see Templates).

Custom CSS

Your Custom CSS is appended after the template’s base CSS, so it can override defaults.

Recommended patterns:

Prefer CSS variables for theme colors
Avoid overly-specific selectors unless you need them
Use !important sparingly
Accessibility tip: Your theme should still be readable if images fail to load (avoid replacing text with images)

Custom HTML

Custom HTML is inserted into the first .profile-custom-html element found in the base template.

Use Custom HTML when you need:

a consistent wrapper for layout grids
badges / link cards / “now playing” style blocks
a custom header section

Preview

The Preview is an <iframe> with a restrictive sandbox:

Scripts do not run
This reduces risk and helps keep previews consistent

Snapshots

Snapshots are stored in your browser (localStorage). They’re meant for quick iteration:

Save before trying something risky
Save “milestones” as you polish a theme
Load older snapshots if you want to revert

Theme bundles (Import / Export)

Theme bundles let you move work between browsers/machines and share a theme as a single file.

Export Theme

Click Export Theme to download a JSON bundle that includes:

Template selection (if applicable)
Custom CSS + Custom HTML
Mock profile settings (name, avatar, background, etc.)
Lab toggles like Auto Update (when included)

Include extracted base (optional):
If you’re using an extracted base (copied from a real MyOshi preview), you may also enable Include extracted base to embed that extracted base in the export (larger file).

Import Theme

Click Import Theme to load a previously exported bundle.

Advanced: the import also accepts compatible theme export JSON produced by other tools in the same ecosystem (for example, OshiForge v1 exports). It will be converted into a Theme Lab bundle automatically.

Recommended workflow

Start with Quick Theme Builder or Theme Variables to get a cohesive base.
Use CSS Blocks for common patterns (glass cards, background overlay, etc.).
Add Widgets / Schedule Builder output in Custom HTML if you need extra structure.
Run Audit + Accessibility Audit before sharing.
Export a theme bundle when you want to back up or share.