---
title: Preview a theme on your site
description: Show the theme from the tweakcn editor on your own running app, before you install it.
url: https://tweakcn.thally.app/guides/preview-on-your-site
---

# Preview a theme on your site

Show the theme from the tweakcn editor on your own running app, before you install it.

The **Custom** preview tab loads your own app and applies the editor theme to
it live. Use it to check a theme on your real pages.

![Custom preview tab with setup steps](/images/live-preview.png)

## Before you begin

- An app that uses shadcn/ui CSS variables on `:root`.
- The app running at `http://localhost:3000`.

#### Add the preview script

Add this script inside `<head>` of your app.

#### Next.js (App)

```tsx app/layout.tsx
<head>
  <script src="https://tweakcn.com/live-preview.min.js" />
</head>
```

#### Vite

```html index.html
<head>
  <script src="https://tweakcn.com/live-preview.min.js"></script>
</head>
```

The Custom tab also has snippets for Next.js (Pages) and Remix.

#### Enter your URL

In the editor, select the **Custom** preview tab. Enter
`http://localhost:3000` in the URL field.

#### Edit the theme

Change a color. Your app in the preview changes at once.

> **Development only:**
Add the script only in development. Remove it before you deploy.

> **Not tested in these docs:**
These steps come from the editor and the tweakcn source. Test them with your
app before you depend on them.