Getting Started
Vivid is an AI-powered wingman to build your web app. With Vivid, just click a component on your screen, let AI generate all your boilerplate, and make in-browser edits that automatically sync with your source code. Learn more about Vivid at our landing page.
Get started by adding Vivid to your app! Starting a new project? Get started even faster by cloning one of our starter repos:
- TypeScript, NextJS, Tailwind, Vivid
- JavaScript, NextJS, Tailwind, Vivid
- JavaScript, React, Express, Tailwind, Vivid
Or try Vivid immediately with our demo — a landing page with Vivid already set up.
System Requirements
- React (≥ 17.0.2)
- NextJS (
next@latest
ornext@next-11
), Vite, or CRA - Tailwind CSS
- Chrome (or any Chromium browser)
Vivid is built with Tailwind styling in mind. Although it may work on web apps built without Tailwind, it has not been thoroughly tested and its functionality will be severely limited.
There is a known bug with Next where older versions of Next 12 use the wrong React renderer, which prevents Vivid from finding your React components.
To prevent this, ensure that you are on the latest version of Next 12 or 11 (next@latest
or next@next-11
, respectively).
Install
Install Vivid with your preferred package manager.
- yarn
- npm
yarn add -D vivid-studio
npm install -D vivid-studio
Setup
Paste this code at the top of your root file outside of any functions.
if (
typeof window !== "undefined" &&
process.env.NODE_ENV === "development"
// && /VIVID_ENABLED=true/.test(document.cookie)
) {
import("vivid-studio").then((v) => v.run());
import("vivid-studio/style.css");
}
React Framework | Common Root File |
---|---|
NextJS | _app.jsx / _app.tsx |
Create React App | index.jsx / index.tsx |
Vite | main.jsx / main.tsx |
Example Setup
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
if (
typeof window !== "undefined" &&
process.env.NODE_ENV === "development"
// && /VIVID_ENABLED=true/.test(document.cookie)
) {
import("vivid-studio").then((v) => v.run());
import("vivid-studio/style.css");
}
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
Running Vivid
Run your dev server to enable all of Vivid's functionality (usually with yarn dev
or npm run dev
). Navigate to your localhost URL in the browser (Vivid is currently built for local development).
If Vivid is running, the browser will show our logo on the bottom left of the page. On first load, Vivid will prompt you to enter your email and showcase Vivid's basic functionality. Be sure to enter the email you used to sign up for our waitlist to guarantee access.

Using Vivid in Shared Repos
The setup above enables Vivid for all collaborators on a shared repository once pushed. To disable Vivid by default for collaborators:
Disabling Vivid for Collaborators in Shared Repos
When you push to a shared repository, Vivid will be automatically enabled for anyone who pulls your changes. It may be the case that you want collaborators to have the option to load Vivid if they'd like but not have it automatically load as it does for you. To enable this behavior:
Uncomment
// && /VIVID_ENABLED=true/.test(document.cookie)
in the setup code above.Start your application's development server and navigate to the corresponding localhost url. Then, open the developer tools console and execute the following command, then reload:
document.cookie = "VIVID_ENABLED=true; path=/; max-age=315360000";
The uncommented line of code only enables Vivid if it detects the VIVID_ENABLED
cookie for localhost on your browser. The command in Step 2 simply sets this cookie, which you only have to do once.
Once done, Vivid will only run if the cookie above is set, so clearing your cache or opening your app in incognito mode will disable Vivid. If you notice that Vivid is not loading, try Step 2 above again to reset the cookie.
To use Vivid as a collaborator when it is disabled by default:
Enabling Vivid as a Collaborator in Shared Repos
Start your application's development server and navigate to the corresponding localhost url. Then, open the developer tools console and execute the following command, then reload:
document.cookie = "VIVID_ENABLED=true; path=/; max-age=315360000";
The uncommented line of code only enables Vivid if it detects the VIVID_ENABLED
cookie for localhost on your browser. The command in Step 2 simply sets this cookie, which you only have to do once.
Once done, Vivid will only run if the cookie above is set, so clearing your cache or opening your app in incognito mode will disable Vivid. If you notice that Vivid is not loading, try Step 2 above again to reset the cookie.
Invite friends to use Vivid!
Add your friend's email here, and we'll shoot them an email inviting them to try out Vivid!