> For the complete documentation index, see [llms.txt](https://documentation.hak5.org/theme-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://documentation.hak5.org/theme-studio/readme.md).

# Theme Studio

Design your own WiFi Pineapple Pager themes, right in your browser.

{% hint style="info" %}
Get Theme Studio Pro: <https://shop.hak5.org/products/theme-studio-pro>
{% endhint %}

**Theme Studio Pro** by Hak5 is the theme editor for the WiFi Pineapple Pager. It runs in your browser at [themestudio.hak5.org](https://themestudio.hak5.org) and draws every screen exactly as the Pager draws it, so what you see in the editor is what your Pager shows.

![Theme Studio Pro with the default theme's dashboard open](https://1168486578-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FYUw5FdwX3RNc9Yxd0SzQ%2Fuploads%2Fgit-blob-99dd4728df640a78a4911808603317460d0024ef%2Feditor-overview.png?alt=media)

There's nothing to install. Sign in, start a theme, and edit it on the screen: click anything to select it, drag it into place, change its text and colors, and paint its images. When you're done, export the theme and copy it to your Pager.

## What you can do

* **Start a theme** from a copy of the default theme, open one you already have, or browse the community themes.
* **Edit screens visually.** Select text, images, variables and menu items, then move, align, restyle or edit them. Every change can be undone.
* **Paint your images** in the built-in asset editor, with layers, pixel-art tools and the Pager's own fonts. Edit a single image or a whole screen at once.
* **Try your menus** with the Pager's buttons in Emulate.
* **Check your theme** for anything that would stop it loading or look wrong on the Pager, and jump straight to each problem.
* **Keep up with the firmware.** What's new lists what each firmware release changed for themes and can add it to yours.
* **Optimize images** so your theme stays small.
* **Export** the theme as a zip, or save it straight to a folder on your computer.

## Key ideas

* A **theme** is a folder: a `theme.json` manifest, the screens (**components**) as JSON files, and the images (**assets**) as PNG files. See [Theme Files](/theme-studio/reference/theme-files.md).
* A **screen** is drawn from **layers**: text, images and variables (live values such as the battery level or the time). Menu screens group layers into **menu items**, each with a normal look and a selected look.
* The **manifest** (`theme.json`) names every component and decides how the Pager moves between them.

## Where to go next

* New to Theme Studio Pro? Start with [Accessing Theme Studio Pro](/theme-studio/getting-started/accessing-theme-studio.md), then [Your First Theme](/theme-studio/getting-started/your-first-theme.md).
* Want a tour of the screen? See [The Editor](/theme-studio/using-theme-studio/the-editor.md).
* Looking for a key or a file format? See [Keyboard Shortcuts](/theme-studio/reference/keyboard-shortcuts.md) and [Theme Files](/theme-studio/reference/theme-files.md).
* Something not working? See [Common Issues](/theme-studio/troubleshooting/common-issues.md).