Pixy: https://pixydesignapp.com Docs: https://pixydesignapp.com/docs # Install the script tag One tag in the head, on every environment you design on. It is inert for visitors and costs them one cached file. One tag, in the `` 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](https://pixydesignapp.com/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: ```html ``` Paste it into the ``, 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](https://pixydesignapp.com/docs/authorize). ## 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](https://pixydesignapp.com/docs/authorize). No button? View source and check the tag is in the HTML with the key from your project card.