FeaturesTemplatesShowcaseTownie
AI
BlogDocsPricing
Log inSign up
jeffreyyoung
jeffreyyoungclick-to-edit
Public
Like
click-to-edit
Home
Code
3
README.md
H
index.ts
script.js
Branches
1
Pull requests
Remixes
History
Environment variables
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.
Sign up now
Code
/
Code
/
Search
index.ts
https://jeffreyyoung--f9caec548dcf11f080860224a6c84d84.web.val.run
README.md

Element Selector Script Server

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.

Features

  • 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 via window.Poe.sendUserMessage()
  • Fallback: If Poe integration isn't available, copies the message to clipboard

Usage

Include the script on any webpage:

<script src="https://your-val-town-url.web.val.run/script.js"></script>

How it works:

  1. Click the floating button "✏️ Enable click to edit mode" in the bottom right corner to enter selection mode
  2. Hover over elements to see them highlighted with an orange outline
  3. Click on any element to select it and open the modification dialog
  4. Enter your request in the text box that appears
  5. Click "Send to @app-creator" to submit your request to Poe
  6. The script automatically exits selection mode after sending

Keyboard shortcuts:

  • Enter: Submit the modification request
  • Escape: Cancel and close the text box

API Endpoints

  • GET / - Demo page showing the script in action
  • GET /script.js - The main JavaScript file to include on your pages

Technical Details

  • 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

Demo

Visit the root URL to see a demo page with sample elements you can interact with.

Integration with Poe

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.

HTTP
  • index.ts
    jeffreyyoung--f9…84.web.val.run
Code
README.md
H
index.ts
script.js
Go to top
X (Twitter)
Discord community
GitHub discussions
YouTube channel
Bluesky
Product
FeaturesPricing
Developers
DocsStatusAPI ExamplesNPM Package Examples
Explore
ShowcaseTemplatesNewest ValsTrending ValsNewsletter
Company
AboutBlogCareersBrandhi@val.town
Terms of usePrivacy policyAbuse contact
© 2025 Val Town, Inc.