click-to-edit
Val Town is a collaborative website to build and scale JavaScript apps.
Deploy APIs, crons, & store data – all from the browser, and deployed in milliseconds.
index.ts
https://jeffreyyoung--f9caec548dcf11f080860224a6c84d84.web.val.run
This server provides a JavaScript script that adds element selection functionality to any webpage. When included, it allows users to visually select elements and send modification requests to Poe's @app-creator.
- Floating Button: A button with pencil icon and text "✏️ Enable click to edit mode" appears in the bottom right corner of any page that includes the script
- Selection Mode: Click the button to toggle selection mode on/off
- Visual Feedback: Hovered elements get an orange outline when in selection mode
- Text Input: Click any element to open a text box asking "What should be changed?"
- Poe Integration: Automatically sends requests to
@app-creator
viawindow.Poe.sendUserMessage()
- Fallback: If Poe integration isn't available, copies the message to clipboard
<script src="https://your-val-town-url.web.val.run/script.js"></script>
- Click the floating button "✏️ Enable click to edit mode" in the bottom right corner to enter selection mode
- Hover over elements to see them highlighted with an orange outline
- Click on any element to select it and open the modification dialog
- Enter your request in the text box that appears
- Click "Send to @app-creator" to submit your request to Poe
- The script automatically exits selection mode after sending
- Enter: Submit the modification request
- Escape: Cancel and close the text box
GET /
- Demo page showing the script in actionGET /script.js
- The main JavaScript file to include on your pages
- The script is self-contained and doesn't require any external dependencies
- Uses event delegation and proper cleanup to avoid memory leaks
- Handles edge cases like off-screen positioning and element context
- Provides element context (tag name, classes, ID, and text content) with each request
- Gracefully handles cases where Poe integration isn't available
Visit the root URL to see a demo page with sample elements you can interact with.
The script expects window.Poe.sendUserMessage()
to be available. When a user selects an element and enters a modification request, it calls:
window.Poe.sendUserMessage(`@app-creator ${userPrompt}
Element context: ${elementInfo}`);
If Poe integration isn't available, it falls back to copying the message to the clipboard.