| 1 | # code<sup>_lift_</sup>
|
| 2 |
|
| 3 | 
|
| 4 |
|
| 5 | > A "No Code" GUI for your existing React app.
|
| 6 |
|
| 7 | ## Getting Started
|
| 8 |
|
| 9 | Within your [create-react-app][cra] project:
|
| 10 |
|
| 11 | 1. `yarn add codelift --dev`
|
| 12 | 1. `yarn codelift start`
|
| 13 | 1. Add `import "codelift/register"` to the top of your `src/App.tsx`.
|
| 14 |
|
| 15 | ## Examples
|
| 16 |
|
| 17 | - [Create React App + Tailwind CSS](/examples/cra)
|
| 18 | - [Next.js + Tailwind CSS](examples/next)
|
| 19 |
|
| 20 | ## Features
|
| 21 |
|
| 22 | ### CSS Inspector
|
| 23 |
|
| 24 | 1. Hover & Select an element.
|
| 25 | 1. **Find-as-you-type** CSS classes.
|
| 26 | 1. **Hover to preview** before applying.
|
| 27 | 1. **Click to toggle** in your source code.
|
| 28 |
|
| 29 | ### Feature Requests
|
| 30 |
|
| 31 | - [ ] Install missing dependencies
|
| 32 | - [ ] Click tag to open in editor
|
| 33 | - [ ] Add/Wrap elements
|
| 34 | - [ ] Convert element to Component
|
| 35 | - [ ] `:hover`, etc. classes
|
| 36 | - [New Feature Request](https://github.com/ericclemmons/codelift/issues/new)
|
| 37 |
|
| 38 | ## Contributing
|
| 39 |
|
| 40 | 1. Clone this repo.
|
| 41 | 1. `yarn cra` or `yarn next` to run the CRA or Next.js examples, respectively.
|
| 42 |
|
| 43 | ## Author
|
| 44 |
|
| 45 | - Eric Clemmons
|
| 46 |
|
| 47 | [cra]: https://github.com/facebook/create-react-app
|
| 48 | [tailwind]: https://tailwindcss.com/
|