Skip to main content
AppBlips can open a real React + Vite website project, such as one a web designer built for you, and let you keep editing it with AI. The project keeps its own files and folders: when you export it, you get the same project back, ready for npm install and npm run build.

​
What can be imported

AppBlips imports projects that use:
  • React with Vite (TypeScript or JavaScript)
  • Tailwind CSS v3 or v4 (including v4 setups with @config and @plugin), or plain CSS and CSS modules
  • React Router (v6 or v7), including createBrowserRouter
  • npm packages such as shadcn/ui, Radix, Framer Motion and lucide-react, plus packages that only add styles (such as Fontsource fonts or swiper/css)
  • Images and fonts in src/assets or public/
Next.js, Create React App, Vue and monorepos with several packages can’t be imported.

​
For designers: prepare the zip

  1. Open the project folder on your computer (the folder that contains package.json, index.html and src).
  2. Delete or leave out the node_modules and dist folders. AppBlips skips them anyway, but the zip is much smaller without them.
  3. Zip the folder: right-click it and choose Compress (macOS) or Send to → Compressed (zipped) folder (Windows).
  4. Send the .zip file to your customer.
AppBlips never imports .env files, because they can contain secrets. It does read .env.example, so put the VITE_* values the site needs to display there.

​
For site owners: import and edit

  1. On the start screen, click Import a site.
  2. Click the box and choose the .zip file, or drag the file onto it.
  3. Check the name AppBlips suggests, then click Open site.
  4. Describe a change in the chat, for example “Change the headline on the home page to Fresh bread daily”, and click Update Site.
The AI finds the right files, edits them, and checks that the project still builds before it finishes. The preview updates when it’s done. Use the address bar above the preview to open another page, for example appblips.local/about.

​
Browse the project’s files

Click the Files tab in the preview toolbar to look through the project:
  • The file list on the left shows every folder and file. Type in Search files… to find one by name.
  • Common files and folders have a short plain-English description of what they’re for, shown above the code.
  • Files changed by the AI’s last edit have a small dot, and Changed in the last edit lists them.
  • Code files are colour-highlighted. Images, fonts and videos show a preview instead.
  • Click Copy to copy a file’s code. Drag the edge of the file list to resize it, or double-click the edge to reset it.
You can’t type into files here: ask the AI for changes in the chat.

​
Export the project

Click Export in the toolbar to download the project as a .zip. Every file is at its original path, and files the AI didn’t change are exactly as they were imported. To build or host it:
  1. Unzip the file.
  2. In a terminal, open the unzipped folder.
  3. Run npm install.
  4. Run npm run build.
If the AI added or removed an npm package, AppBlips tells you when you export. Use npm install, not npm ci, so the lockfile catches up with package.json.

​
Good to know

  • The preview loads npm packages from the internet, so editing an imported site needs a connection.
  • The preview runs Tailwind in the browser. It looks very close to the real build, and the export always keeps your real Tailwind setup.
  • In the desktop app, each imported site is also saved as a normal project folder: open Settings → Data to find your projects folder, then look in <site name>/site.
  • Imported sites aren’t included in Export all apps backups. Export each one as a .zip instead.
  • The Review offer after a build isn’t available for imported sites yet. The AI still checks that the project builds after every change.