codelift
> A "No Code" GUI for your existing React app. > > ![Next.js Example](/screenshot.png) > – [Launch Tweet](https://twitter.com/ericclemmons/status/1205161643300098048)
Last updated 2 months ago by ericclemmons .
Original npm · Tarball · package.json
$ cnpm install codelift 
SYNC missed versions from official npm registry.

codelift

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

Next.js ExampleLaunch Tweet

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 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.

Examples

Features

  • <kbd>Double-Click</kbd> componetns & elements in the tree view to open in VS Code.

  • Tailwind Visual 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.
  • <kbd>CMD+'</kbd> 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:

    Header Inspector

Contributing

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

Author

  • Eric Clemmons

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Eric Clemmons

???? ???? ????

​Faizaan

????

This project follows the all-contributors specification. Contributions of any kind welcome!

Current Tags

  • 1.0.14-canarycanary.260.b264e07.0                                ...           canary (2 days ago)
  • 1.0.13                                ...           latest (2 months ago)

232 Versions

Maintainers (1)
Downloads
Today 42
This Week 339
This Month 1,038
Last Day 42
Last Week 91
Last Month 515
Dependencies (25)
Dependents (0)
None

Copyright 2014 - 2016 © taobao.org |