xml-prompt-builder/index.html at main · lolrazh/xml-prompt-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>XML Prompt Builder – Visual Structured Prompt Editor for Claude & GPT</title>
  <meta name="description"
    content="Build clean, nested XML prompts with a visual editor. Create templates, validate structure, and copy formatted prompts for Claude, GPT, and other LLMs." />
  <meta name="author" content="lolrazh" />
  <link rel="canonical" href="https://xmlprompt.dev" />

  <meta property="og:title" content="XML Prompt Builder – Visual Structured Prompt Editor for Claude & GPT" />
  <meta property="og:description"
    content="Build clean, nested XML prompts with a visual editor. Create templates, validate structure, and copy formatted prompts for Claude, GPT, and other LLMs." />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://xmlprompt.dev" />
  <meta property="og:site_name" content="XML Prompt Builder" />
  <meta property="og:image" content="https://xmlprompt.dev/og.png" />
  <meta property="og:image:secure_url" content="https://xmlprompt.dev/og.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:alt" content="XML Prompt Builder Preview" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />

  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:site" content="@lolrazhx" />
  <meta name="twitter:title" content="XML Prompt Builder – Visual Structured Prompt Editor for Claude & GPT" />
  <meta name="twitter:description"
    content="Build clean, nested XML prompts with a visual editor. Create templates, validate structure, and copy formatted prompts for Claude, GPT, and other LLMs." />
  <meta name="twitter:image" content="https://xmlprompt.dev/og.png" />
  <meta name="twitter:image:alt" content="XML Prompt Builder Preview" />

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "SoftwareApplication",
    "name": "XML Prompt Builder",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Web Browser",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    },
    "description": "Build clean, nested XML prompts with a visual editor. Create templates, validate structure, and copy formatted prompts for Claude, GPT, and other LLMs.",
    "url": "https://xmlprompt.dev",
    "screenshot": "https://xmlprompt.dev/og.png",
    "author": {
      "@type": "Person",
      "name": "lolrazh",
      "url": "https://github.com/lolrazh"
    },
    "browserRequirements": "Requires JavaScript",
    "softwareVersion": "1.0"
  }
  </script>

  <script src="https://cdn.databuddy.cc/databuddy.js" data-client-id="RkyZch2IQmGUTivet_geN" data-enable-batching="true"
    crossorigin="anonymous" async></script>
</head>

<body>
  <div id="root">
    <!-- SEO-friendly content for crawlers (hidden from users, visible to bots parsing HTML) -->
    <div id="seo-content" style="display: none; max-width: 1200px; margin: 0 auto; padding: 2rem;">
      <header style="margin-bottom: 2rem; text-align: center;">
        <h1 style="font-size: 2.5rem; font-weight: 800; margin-bottom: 0.5rem;">XML Prompt Builder</h1>
        <p style="font-size: 1.25rem; color: #666;">Visual Structured Prompt Editor for Claude, GPT & LLMs</p>
      </header>
      <section style="margin-bottom: 2rem;">
        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Build XML Prompts Visually</h2>
        <p style="line-height: 1.6; margin-bottom: 1rem;">Create structured XML prompts for AI systems without the
          hassle of manual formatting. Perfect for prompt engineers and AI enthusiasts working with Claude, GPT, and
          other large language models.</p>
      </section>

      <section style="margin-bottom: 2rem;">
        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Features</h2>
        <ul style="line-height: 1.8; padding-left: 1.5rem;">
          <li><strong>Create Elements:</strong> Add XML tags and nest them to create complex hierarchies easily</li>
          <li><strong>Format Automatically:</strong> Let the tool handle indentation, nesting, and proper XML formatting
          </li>
          <li><strong>Create Templates:</strong> Save named prompt templates and load them anytime to reuse and iterate
            faster</li>
          <li><strong>Copy & Use:</strong> Copy perfectly structured XML prompts for use in your AI applications</li>
        </ul>
      </section>

      <section style="margin-bottom: 2rem;">
        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Why Use XML for Prompts?</h2>
        <p style="line-height: 1.6; margin-bottom: 1rem;">XML-style prompting provides clear structure and hierarchy to
          your AI prompts, making them more reliable and easier to maintain. Many advanced AI systems like Claude and
          GPT-4 work exceptionally well with structured XML prompts.</p>
      </section>

      <section style="margin-bottom: 2rem;">
        <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 0.5rem;">Getting Started</h2>
        <p style="line-height: 1.6;">Start building your XML prompts with our visual editor. No coding experience
          required – just click to add elements, type your content, and copy the formatted output.</p>
      </section>

      <footer style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #ddd;">
        <p style="text-align: center; color: #666;">Created with ♥ for prompt engineers and AI enthusiasts by <a
            href="https://github.com/lolrazh" rel="noopener noreferrer">@lolrazh</a></p>
      </footer>
    </div>
  </div>
  <noscript>
    <div style="padding: 2rem; max-width: 800px; margin: 0 auto; font-family: system-ui, -apple-system, sans-serif;">
      <h1>XML Prompt Builder</h1>
      <p>This application requires JavaScript to run. Please enable JavaScript in your browser to use the XML Prompt
        Builder.</p>
      <p>XML Prompt Builder is a visual tool for creating structured XML prompts for AI systems like Claude and GPT.</p>
    </div>
  </noscript>
  <!-- IMPORTANT: DO NOT REMOVE THIS SCRIPT TAG OR THIS VERY COMMENT! -->
  <script src="https://cdn.gpteng.co/gptengineer.js" type="module"></script>
  <script type="module" src="/src/main.tsx"></script>
</body>

</html>