/codelift

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

Primary LanguageTypeScript

codelift

Create React App Example

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

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