Web Edit Tool Development
Budget: ₹12,500 – ₹37,500 INR
I'm seeking a developer to create a web edit tool inspired by LocatorJS but utilizing an "onlook" approach. This tool should be compatible with React and Vue.
Essential Features:
- Element selection and inspection
- In-browser code editing
- Live preview and updates
User Interface:
- A floating toolbar for an intuitive editing experience
Ideal Skills and Experience:
- Proficiency in React and Vue
- Strong experience in building web-based editing tools
- Knowledge in front-end development and UI/UX design
The Feature: When the tool's popup appears , it should also display the git blame information for that line of code.
"John Doe, 3 months ago | feat: add user profile header (PR #417)"
Making the commit message or PR number a clickable link to GitHub would be incredible.
Instant Impact: Collaboration skyrockets. I instantly know who to ask if I have a question. I can immediately understand the history and intent behind a piece of code without ever leaving my workflow.
The Feature: When I use your tool to click on an element containing data (like <h1>John Doe</h1>), the popup should not only give me a link to the code but also show me the data's origin:
If from props: Prop: user.name | Value: "John Doe"
If from local state: State: name | Value: "John Doe"
And the holy grail - if from an API: API Call: GET /api/users/123 | Path: data.user.name with a clickable link to view the full JSON response from that network request.
The Feature: An integration with Figma. Allow us to link a component in our codebase to a component in Figma. Then, in the browser, I could toggle an "overlay" mode.
The tool would overlay the Figma design specs (showing padding boxes, color codes, font properties) directly on top of my live rendered component.
It could even highlight discrepancies: Live Color: #FAFAFA, Figma Spec: #FFFFFF.
Essential Features:
- Element selection and inspection
- In-browser code editing
- Live preview and updates
User Interface:
- A floating toolbar for an intuitive editing experience
Ideal Skills and Experience:
- Proficiency in React and Vue
- Strong experience in building web-based editing tools
- Knowledge in front-end development and UI/UX design
The Feature: When the tool's popup appears , it should also display the git blame information for that line of code.
"John Doe, 3 months ago | feat: add user profile header (PR #417)"
Making the commit message or PR number a clickable link to GitHub would be incredible.
Instant Impact: Collaboration skyrockets. I instantly know who to ask if I have a question. I can immediately understand the history and intent behind a piece of code without ever leaving my workflow.
The Feature: When I use your tool to click on an element containing data (like <h1>John Doe</h1>), the popup should not only give me a link to the code but also show me the data's origin:
If from props: Prop: user.name | Value: "John Doe"
If from local state: State: name | Value: "John Doe"
And the holy grail - if from an API: API Call: GET /api/users/123 | Path: data.user.name with a clickable link to view the full JSON response from that network request.
The Feature: An integration with Figma. Allow us to link a component in our codebase to a component in Figma. Then, in the browser, I could toggle an "overlay" mode.
The tool would overlay the Figma design specs (showing padding boxes, color codes, font properties) directly on top of my live rendered component.
It could even highlight discrepancies: Live Color: #FAFAFA, Figma Spec: #FFFFFF.