This is a simple DOM playground that allows you to manipulate some arbitrary HTML elements using Javascript Drag and Drop API. It allows the user to drag and drop the elements to a specific location on the screen and learn how HTML nesting works by visually seeing the elements being one inside the other.
You can also customize the element attributes and see the changes in real-time. The playground also has some error handling to prevent the user from nesting elements that are not allowed to be nested or exceeding the maximum number of children allowed for a specific element.
Also, the playground allows you to generate the HTML code of the elements you created and copy it to the clipboard.
You can see the project live here.
- Drag and Drop API
- HTML nesting visualization
- Customizable element attributes
- Corresponding parent-child relationship error handling
- Corresponding child limit error handling
- HTML generation and copy to clipboard
- Next.js
- Tailwind CSS
- dnd Kit
- ShadCN
- Clipboard API
- Clone the repository
git clone https://github.com/HoracioGutierrez/html-playground- Move to the project directory
cd html-playground- Install the dependencies
npm install- Run the project
npm run dev- Open your browser and go to
http://localhost:3000
Hope you enjoy it! 🚀