A "No Code" GUI for your existing React app. – Launch Tweet
Within your project:
yarn add codelift --dev
For create-react-app:
yarn codelift start
For Next.js:
yarn codelift dev
(codelift
runs yarn ____
with whatever you provide)
Add the following import "codelift/register"
to the top of your src/index.tsx
or pages/_app.tsx
:
import React from "react";
import ReactDOM from "react-dom";
import { register } from "codelift";
register({ React, ReactDOM });
codelift
requires access to your application's copy of react
and react-dom
to support custom inspectors.
Double-Click componetns & elements in the tree view to open in VS Code.
Tailwind Visual Inspector
CMD+' to toggle codelift and browse normally.
Custom Inspectors:
Suppose you have Header
component that accepts a title
:
export const Header = ({ title }) => {
...
}
Next, attach a custom Inspector
component to your Header
that accepts the current props
and calls setProps
when it changes:
Header.Inspector = ({ props, setProps }) => {
return (
<input
onChange={event => setProps({ title: event.target.value })}
defaultValue={props.title}
/>
);
};
Your Inspector
will be rendered in a sidepanel when a Header
is selected:
yarn cra
or yarn next
to run the CRA or Next.js examples, respectively.Thanks goes to these wonderful people (emoji key):
This project follows the all-contributors specification. Contributions of any kind welcome!