Install the script tag

One tag, in the <head> of the site you want to design. That is the whole installation, there is no build step, no package to add, and nothing to run.

The tag

Open your project on /my and press Connect. A new project opens on that page by itself. Under Install script tag, press Copy. The tag already carries your project key:

<script type="module" src="https://pixydesignapp.com/pixy.min.js?k=px_yourprojectkey"></script>

Paste it into the <head>, in a static site that is index.html, in a framework it is whatever file owns the document head (app/layout.tsx, src/app.html, layouts/default.vue, the base template). type="module" matters: the loader is an ES module.

Install it on every environment you design on, localhost, staging and production all take the same tag. Pixy has no notion of an environment; the browser you approve and the URL you are on are what scope an edit.

It is inert for visitors

The key in the tag is public and does nothing on its own. It names the project; it grants nothing.

For anyone who has not approved this browser, which is every visitor, the loader reads one value out of local storage and stops there. No editor, no second request. The cost of having Pixy on a production page is one small cached file.

There is no exception, not even on a fresh install: the Connect Pixy button only shows when the address carries ?pixy-connect, so a visitor never sees it.

The right to edit is a separate credential that only exists in your own browser. That is the next step: authorize the browser.

If you would rather not ship it

Nothing stops you from wrapping the tag in whatever your stack uses for a development-only branch. The setup is identical; you design on localhost instead of on the live site.

The trade is real, though: designing on production means designing against real content, real breakpoints and the CSS that actually shipped.

Content Security Policy

If your site sends a CSP, it needs two allowances:

• script-src: https://pixydesignapp.com, so the loader and the editor bundle can load.
• connect-src: wss://pixydesignapp.com, the relay socket the editor talks over.

Without them the tag is fetched and blocked, and the browser console says so.

One more is optional:

• img-src: blob:, so a background or mask image picked in Pixy shows on the page while you design. Pictures need nothing, they are painted by the editor itself. Without it the record is still right and the agent builds the background, you just do not see it in Pixy.

That is the whole list. The editor loads no fonts or stylesheets of its own, its icons are inline and its chrome is painted from CSS, so a policy that never mentions font-src or style-src is fine. A default-src that omits data: is fine too.

Checking it landed

Open the page with ?pixy-connect on the end of its address, https://acme.com/?pixy-connect. A black Connect Pixy button at the bottom means the tag is live, that is the next step: authorize the browser.

No button? View source and check the tag is in the HTML with the key from your project card.