Skip to main content

Introduction

Edon is a drag-and-drop design and development tool for the React framework, enabling you to create user interfaces quickly, simplify the process of building and editing them.

With its drag-and-drop interface, you can build pages and UI layouts without writing complex code. Simply focus on your design needs.

This tool is designed to UI process, allowing developers and designers to build fully customized components faster.

✨ Features​

  • Fast drag-and-drop ui building
  • Built-in component library (buttons, forms, lists, etc.)
  • The generated output is fully consistent with the project source

🎨 UI Kit Integration​

Edon 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 edon uses Tamagui for styling and theming to provide a fast, consistent, and highly customizable design system.

🚀 Getting Started​

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

  • React
  • React Native (Full support is not yet provided.)
  • React-compatible environments (Full support is not yet provided.)

After creating the project, follow these steps:​

  1. Add the @edon-app/webpack to your React project.

  2. If you want to use the default resolver built from the edon app, add @edon-app/common to your React project.

  3. Configure settings from the edon app.

After configuring the edon application, creating the initial app and creating the first container, you can then start React to give the bundle file to the edon application.

✅ What You'll Need​

The requirements for using React 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.