jhaemin / Pantheon

Design web apps with real React components

Pantheon

Pantheon is an open-source WYSIWYG web application editor with real-time interaction and code generation.

The main goal is to destroy the barrier between design and development by eliminating the time and effort to convert the design to code.

Radix Themes is the primary component library for the editor as you can see in the name. But any other component library or even custom components including the native DOM elements can be used.

Try the demo at radix-ui.studio and see how it works. You can't save or load your work yet.

Note: It is still in development and not ready for production.

Dev

bun install
bun run dev

Roadmap

• Declare drawer item with node then clone node when drag and drop to easel
• Re-write UI guides in Vanilla
• Routing
  • Connect to other pages
• Focus on the page on creation
• Handle ground overscroll
  • Double click page to focus
• Keyboard shortcuts
• Improve design mode
• Multiple pages
  • Render multiple pages inside a single ground
• Click drawer item to add node to easel
• Stop unnecessary css animations of components
• Tree view
• Lock/unlock nodes
• Improve text-based nodes controlling experience
  • Introduce mass mode
• Seamless panning from inside iframe to outside iframe
• View (Template)
  • Labeling
  • Detached
  • Synced
• Conditional rendering
• Repetitive rendering
• Subscription-based global node atoms list update instead of registering/deleting logic inside each function
• Use iframe for easel
  • Sync drag and drop
    • Sync events
      • Sync mouse events
      • Sync keyboard events
  • Sync atoms
• Drag and drop nodes
  • From drawer to easel
    • Add to container
    • Add to index of container
  • Generalize implementation -> easel and easel -> easel (currently duplicate implementation)
  • Move inside easel
    • Move to another container
      • Prevent moving outer container to inner container (tree violation)
        • Improve logic. Check contains -> Just ignore pointer events on the dragging elements
    • Move to another index of container
• Multi selection, dragging, editing
  • Multi selection
  • Drag and drop multiple nodes
    • Improve ghost
  • Delete multiple nodes
  • Multiple node editing
• Context menu
• Copy and paste nodes
  • Copy nodes
  • Paste nodes
  • Paste nodes to another container
  • Paste nodes to another index of container
• Generate tsx code
  • Download file
    • Download single file
    • zip multiple files
  • Props
  • Self closing tag when there is no children
  • Generate part of code
• Type meta data
  • Record components version
• Separate node properties to props key
• Use map or deepMap for node atoms
• Declarative application generation
  • Generate Studio code itself from component language server
  • Generate type guard functions
• Solution for handling components version up
  • Introduce Library
• Improve rendering performance on bulk node update
  • For example, when inserting multiple nodes, it should not re-render the easel for each node insertion.
  • This is not a problem for now. But it will be a problem when we have a lot of nodes.
• Flexible easel positioning
  • Zoom in/out
  • Pan
• Undo/Redo
  • Action-based instead of state-based
  • Bundle multiple actions into a single action bundle
  • Insert
  • Remove
  • Move nodes (Insert)
  • Properties
  • Slots
  • Wrap (Insert)
  • Unwrap (Insert + Remove)
  • Resize pages
  • Move pages (translate)
• Composition components are not containable nodes
• Don't add custom style or class to components. Instead use data-* attributes for custom styling.
• Pass shared data from top window to iframe through postMessage instead of window injecting.
• Wrap common node props to a single object. (instead of rest props)
• Inject node attributes to the outermost element of components.
• State management

License

Pantheon is licensed under the MIT License.