https://github.com/ericclemmons/codelift

TypeScript
A "No Code" GUI for your existing React code.

code^lift

A "No Code" GUI for your existing React app.

Getting Started

Within your project:

1. yarn add codelift --dev

2. For create-react-app:

   yarn codelift start

   For Next.js:

   yarn codelift dev

   (codelift runs yarn ____ with whatever you provide)

3. Add import "codelift/register" to the top of your src/App.tsx.

Examples

• Create React App + Tailwind CSS
• Next.js + Tailwind CSS

Features

CSS Inspector

1. Hover & Select an element.
2. Find-as-you-type CSS classes.
3. Hover to preview before applying.
4. Click to toggle in your source code.

Feature Requests

• Install missing dependencies
• Click tag to open in editor
• Add/Wrap elements
• Convert element to Component
• :hover, etc. classes
• New Feature Request

Contributing

1. Clone this repo.
2. yarn cra or yarn next to run the CRA or Next.js examples, respectively.

Author

• Eric Clemmons