Skip to content

hilmanski/simple-draw-editor

Repository files navigation

STATUS

Early progress - not ready yet

About

Simple Draw - with text and element's drag n drop feature
Using raw HTML element, without canvas

Try online here simple-draw-editor.vercel.app or run locally

Alternative

This project is for learning purpose only.
You should definitely check out:

Usage

  • Change frame (main backgorund) -> (default setting on right side) change the detail
  • Add text anywhere -> Choose text mode on Setting, then click on frame area
  • Edit text -> double click on text
  • Same with shape
  • Sort element position by drag and drop in Elements

Tech Stack

  • React (installed with create-react-app)
  • Jotai (state management)
  • Tailwind CSS
  • Icons from tabler-icons.io
  • Draggable
  • React DnDKit

Dev

Run locally

yarn dev

DOING

TODO


DONE / Changelog

  • refactor default value: at ElementGenerator and each of XSetting useState must be from 1 source of truth

  • UX -> onclick element directly go to that setting

  • Shape

    • circle and settings
    • square and settings
  • Element order very important, could be ruled at "Sidebar" maybe there's a fature in draggable for order (but dragged on sidebar) save two separate object? research first how other people do it

  • Sidebar

    • list element
    • hide element
    • remove element
  • Text

    • edit text
    • move text
    • change text property (color, size, family)
  • Background/Frame

    • change property