Skip to main content

Introduction

React Editor is a web and app design editor built for the React framework, enabling you to create user interfaces quickly, easily.

With its drag-and-drop interface, you can build pages and UI layouts without writing complex code. Simply focus on your design needs, and let the editor generate clean React code for you.

This tool is designed to streamline the UI/UX design process, allowing developers and designers to build fully customized components and pages faster while maintaining a clean project structure.

✨ Features​

  • Fast and intuitive drag-and-drop page building
  • Built-in component library (buttons, forms, lists, etc.) sample tamagui.dev
  • Theming and easy customization
  • Clean and optimized React code output
  • Live preview of changes
  • Project import/export support

🎨 UI Kit Integration​

React Editor is UI Kit agnostic, meaning you can integrate any UI library you prefer, such as Material UI, Chakra UI, or your own custom components.

By default, the editor uses Tamagui for styling and theming to provide a fast, consistent, and highly customizable design system.

If needed, you can easily replace Tamagui with any other UI framework or design system of your choice.

🚀 Getting Started​

You can use React Editor with any framework that supports React components, including:

  • React
  • React Native
  • Next.js
  • React-compatible environments

You can start your project in two ways:​

  1. First, create your React app using npx create-react-app, then run create-edon to add the editor to your project.

  2. simply use create-edon alone, which will create the project and set up the editor automatically.

Both approaches provide you with a ready-to-use React environment integrated with React Editor, allowing you to start building your UI right away.

To set up your preferred framework, simply use the following:

# React
npx create-edon my-app

# Next.js (coming create-edon)
npx create-next-app@latest my-next-app

# React Native (coming create-edon)
npx react-native init MyApp
tip

You can also pass command line arguments to set up a new project similar to react.

✅ What You'll Need​

The requirements for using React Editor are the same as any typical React environment.

  1. Set up your preferred React-compatible framework (React, Next.js, or React Native).
  2. After installation, simply open the Edon application to start building your UI.

No additional complex setup is required beyond your standard React project configuration.