A
Anonymous

Whiteboard Component - Copy this React, Tailwind Component to your project

For my online training website create a whiteboard, as react component. completely functional. Whiteboard should be 100% width and just below it I need its tools panel with aero icon/button (to select resize and move selected), pen to draw (Next to it the option to choose the size of pen and drawing mode in a simple popup), eraser icon/button (to erase pen. Next to it the option to choose the size of eraser in a simple popup), colour icon/button (on its click, it should show colour panel user should click on colour and that colour should add to a pallet), paper icon/button (paper icon to change the background of the whiteboard example page template with grid like graph paper or line like notebook. so on its click popup menu should appear with options to chose form one selected background should change of the whiteboard; add option like colours and pattern background, once selected whiteboard background should change), shape icon/button (On this icon click popup with shapes like line, rectangle, ovel, triangle, star should appear. User should be able to select and draw the shape one the whiteboard. when I am clicking on the shape, the popup should appears with shapes like line, circle, rectangle, triange and star, after selection I should be able to draw the particular.), text icon/button (user click on it and when he clicks on whiteboard, he should be able to type using keyword), image icon/button to insert image from computer, undo and redo buttons to change the history or to step back and foreward and clear icon/button (To clear the whole whiteboard). if user click on pen and start writing on whiteboard it should display there. User should be able to select any written text or object using the aero/select tool. if user want, they should remove object like image, shape, pen, or typed text from whiteboard using eraser or delete button from keyboards. user should be able to change colour of text shape, using colour picker and using text he should be able to type anything on whiteboard. User should be able to update the colour of text and shape. Typed text should also be editable. I also want to move or resize or delete, so when I select any object like text, image or shape using aero tool I should be able to select, move and resize that, so place some handles around and inside the object if its selected. also if i click on blank area of whiteboard or press escape key selected object should de select. Most important design should be responsive

Prompt
Component Preview

About

WhiteboardComponent - A fully functional whiteboard with tools for drawing, shapes, text, and images. Built with React and Tailwind. Download free code!

Share

Last updated 1 month ago