Prompt Generator Implementation Analysis

Key Features Identified:

1. Data Structure

Prompts are stored as an array of objects with properties:

{
    "category": "Computers",
    "name": "Act as a Linux Terminal", 
    "text": "I want you to act as a linux terminal..."
}
        

2. Template Processing

Dynamic placeholders in curly braces {like this} are converted to input fields:

// Extract placeholders: /{(?!like this)(.*?)}/g
// Convert to input fields with unique IDs
// Real-time template filling as user types
        

3. Search & Filter

Real-time search across category names and prompt names:

function filterNodes() {
    var searchValue = document.getElementById("searchInput").value.toLowerCase();
    // Filter categories and prompts
    // Show/hide based on search matches
}
        

4. Expandable UI

Tree-like structure with collapsible categories and prompts:

function toggleChildren(node) {
    // Expand/collapse category
    // Show/hide all prompts in category
}

function toggleText(promptElement) {
    // Expand/collapse individual prompt details
}
        

5. Copy to Clipboard

One-click copying of final processed text:

function copyText(promptElementId) {
    let activePrompt = getPromptById(promptId);
    navigator.clipboard.writeText(activePrompt['finalText']);
}
        

6. Real-time Template Updates

As users type in input fields, the template updates live:

function fillInTemplate(inputElement, inputId, promptId) {
    // Get current input values
    // Replace template placeholders
    // Update final text display
}
        

Technology Stack:

Mustache.js - Template rendering
jQuery - DOM manipulation
Vanilla JS - Core logic
Bootstrap CSS - Styling

Implementation Flow:

Load prompts data array
Group prompts by category
Process each prompt for template placeholders
Generate input fields for placeholders
Render UI using Mustache templates
Bind event listeners for search, expand/collapse, copy
Handle real-time template updates