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 or next@next-11), Vite, or CRA
• Tailwind CSS
• Chrome (or any Chromium browser)

info

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.

caution

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

yarn add -D vivid-studio

npm

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

index.tsx

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:

1. Uncomment // && /VIVID_ENABLED=true/.test(document.cookie) in the setup code above.

2. 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.

caution

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.

caution

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!

We'll shoot them an invite!