Codelift – Visual Development for React, powered by Next.js, & Tailwind CSS

Visual Development
for |

Preview CSS changes instantly. Update your code with a click

Select an element, adjust with Codelift's style inspector until it looks right, then click to save!

Codelift updates your code for a faster feedback loop.

Already have a className in mind? Start typing, hover to preview instantly, and save with a Click.

Immediately jump When it's faster to code, Double-Click the element in Codelift's tree inspector to open in VS Code.

Codelift is develoepd & tested against popular React frameworks like Create React App & Next.js.

Codelift has 1st class support for all Tailwind CSS classes. Even with a custom tailwind.config.js!

Note that codelift@v1 has a little bit of setup, but we're working to make codelift zero-config.

If you haven't created a project yet, run:

yarn create next-app --example with-tailwindcss

Then, add codelift to your project:

yarn add codelift --dev

If you're using Create React App, run:

yarn codelift start

If you're using Next.js, run:

yarn codelift dev

codelift will automatically open your browser to localhost:1337.

The last step is to connect your app to codelift:

import React from "react";
import ReactDOM from "react-dom";

import { register } from "codelift";
register({ React, ReactDOM });

Support

Any & all feedback you have is appreciated. You can open an issue on GitHub (recommended), tweet Twitterericclemmons, or reply to emails sent to your Codelift subscription.