Create Visual HTML Editor With Vue JS And Tailwind
Budget: $30 – $250 USD
I am looking for a skilled developer to create a visual HTML editor using Vue JS and Tailwind. The editor should have the following features:
Setup Vue.js v3 for nuxt3 Project composition API:
Create the necessary components for your editor. Here are some components you may consider:
a. Canvas(not canvas element): This component will represent the draggable and resizable canvas where users can arrange HTML elements. You can use libraries like Vue Draggable and Vue Resizable for this functionality.
b. Toolbox: This component will contain a list of HTML elements that users can add to the canvas. Each element can be represented by a draggable item.
c. Element: This component represents an HTML element on the canvas. It should be draggable and editable.
d. StylePanel: This component will provide an interface for users to apply styles to the selected HTML element. You can use Tailwind CSS classes under the hood to provide a wide range of styling options.
Toolbox and Element Dragging:
In the Toolbox component, render a list of HTML elements that users can add to the canvas. Make each element draggable using Vue Draggable or similar libraries. When an element is dragged and dropped onto the canvas, create an instance of the Element component at the dropped position.
Element Editing:
Implement appropriate UI controls in the Element component to allow users to move and edit the content and attributes of HTML elements. For example, you can use input fields, select dropdowns, or rich text editors to enable content editing. Bind the element's properties to the UI controls using Vue's data binding capabilities.
StylePanel:
In the StylePanel component, provide an interface for users to apply styles to the selected HTML element. You can use Tailwind CSS classes under the hood to provide a wide range of styling options. Implement UI controls such as checkboxes, dropdowns, or sliders to allow users to select and apply styles. Bind the selected styles to the HTML element using Vue's data binding.
The design and layout of the editor are open to suggestions, so the ideal candidate should have a good eye for UI/UX and be able to provide recommendations.
Communication for updates and clarifications on the project should be done through instant messaging platforms such as Slack or Skype.
Overall, I am seeking someone with expertise in Vue JS, Tailwind, and HTML to create a visually appealing and user-friendly HTML editor.
Setup Vue.js v3 for nuxt3 Project composition API:
Create the necessary components for your editor. Here are some components you may consider:
a. Canvas(not canvas element): This component will represent the draggable and resizable canvas where users can arrange HTML elements. You can use libraries like Vue Draggable and Vue Resizable for this functionality.
b. Toolbox: This component will contain a list of HTML elements that users can add to the canvas. Each element can be represented by a draggable item.
c. Element: This component represents an HTML element on the canvas. It should be draggable and editable.
d. StylePanel: This component will provide an interface for users to apply styles to the selected HTML element. You can use Tailwind CSS classes under the hood to provide a wide range of styling options.
Toolbox and Element Dragging:
In the Toolbox component, render a list of HTML elements that users can add to the canvas. Make each element draggable using Vue Draggable or similar libraries. When an element is dragged and dropped onto the canvas, create an instance of the Element component at the dropped position.
Element Editing:
Implement appropriate UI controls in the Element component to allow users to move and edit the content and attributes of HTML elements. For example, you can use input fields, select dropdowns, or rich text editors to enable content editing. Bind the element's properties to the UI controls using Vue's data binding capabilities.
StylePanel:
In the StylePanel component, provide an interface for users to apply styles to the selected HTML element. You can use Tailwind CSS classes under the hood to provide a wide range of styling options. Implement UI controls such as checkboxes, dropdowns, or sliders to allow users to select and apply styles. Bind the selected styles to the HTML element using Vue's data binding.
The design and layout of the editor are open to suggestions, so the ideal candidate should have a good eye for UI/UX and be able to provide recommendations.
Communication for updates and clarifications on the project should be done through instant messaging platforms such as Slack or Skype.
Overall, I am seeking someone with expertise in Vue JS, Tailwind, and HTML to create a visually appealing and user-friendly HTML editor.