/mini-page-builder

DnD implementation using react-drag-drop-container package

Primary LanguageJavaScript

Live demo

mini-page-builder

Local Environment Setup

  1. Install project dependencies 
    npm install
  2. Launch live server 
    npm run start

Project Flow

  1. Drag and Drop Elements from Sidebar to the Board.

  2. Drag the Elements on the board to change their position.

  3. Click on an element on the board to select it.

  4. Pressing Delete on keyboard will delete the element from the board.

  5. Pressing Enter on keyboard will open a modal where you can edit element configurations.

  6. Edit Element configurations (Text, X, Y, Font Size, Font Weight) and click Save Changes to update element state.