ReadmeStudio/index.html at main · thisizasif/ReadmeStudio · 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
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />

  <title>Readme Studio | Free Online README.md Generator for GitHub</title>
  <meta name="description" content="Free online README.md generator for GitHub projects. Create professional README files with live preview and markdown export. No login required." />
  <meta name="author" content="thisizasif" />
  <meta name="keywords" content="readme generator, markdown builder, github readme, documentation tool, readme.md creator, free readme generator, online readme builder, readme template, developer tools" />

  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://thisizasif.github.io/ReadmeStudio/" />
  <meta property="og:title" content="Readme Studio | Free Online README.md Generator" />
  <meta property="og:description" content="Create professional README.md files for GitHub in minutes. Live preview, export, and badges. Completely free." />
  <meta property="og:image" content="https://thisizasif.github.io/ReadmeStudio/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:site_name" content="Readme Studio" />

  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://thisizasif.github.io/ReadmeStudio/" />
  <meta property="twitter:title" content="Readme Studio - Free README.md Generator" />
  <meta property="twitter:description" content="Build professional README files for GitHub with live preview and export. Free online tool." />
  <meta property="twitter:image" content="https://thisizasif.github.io/ReadmeStudio/twitter-card.png" />

  <link rel="canonical" href="https://thisizasif.github.io/ReadmeStudio/" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
  <meta name="googlebot" content="index, follow" />

  <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='18' fill='%230b0d12'/%3E%3Ctext x='50' y='55' font-size='60' text-anchor='middle' dominant-baseline='middle' fill='%23f97316' font-family='Arial' font-weight='700'%3ERD%3C/text%3E%3C/svg%3E" />

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebApplication",
    "name": "Readme Studio",
    "description": "Free online README.md generator and builder for GitHub projects",
    "url": "https://thisizasif.github.io/ReadmeStudio/",
    "applicationCategory": "DeveloperApplication",
    "operatingSystem": "Web",
    "offers": {
      "@type": "Offer",
      "price": "0",
      "priceCurrency": "USD"
    },
    "author": {
      "@type": "Person",
      "name": "thisizasif",
      "url": "https://github.com/thisizasif"
    },
    "creator": {
      "@type": "Person",
      "name": "thisizasif"
    },
    "datePublished": "2024-01-01",
    "dateModified": "2026-02-06",
    "featureList": [
      "Live Markdown Preview",
      "Tech Stack Badges",
      "Screenshots Section",
      "FAQ Builder",
      "Copy and Download Markdown",
      "No Login Required"
    ],
    "keywords": "readme generator, markdown builder, github readme, documentation tool, readme.md",
    "publisher": {
      "@type": "Organization",
      "name": "Readme Studio",
      "url": "https://thisizasif.github.io/ReadmeStudio/"
    },
    "screenshot": "https://thisizasif.github.io/ReadmeStudio/og-image.png"
  }
  </script>

  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What is Readme Studio?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Readme Studio is a free online tool that helps developers create professional README.md files for GitHub repositories with live preview, badges, and export options."
        }
      },
      {
        "@type": "Question",
        "name": "Is Readme Studio really free?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Yes! Readme Studio is completely free to use with no hidden costs and no login required."
        }
      },
      {
        "@type": "Question",
        "name": "What features does Readme Studio offer?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "Features include live preview, tech stack badges, FAQ builder, screenshot integration, and markdown export."
        }
      },
      {
        "@type": "Question",
        "name": "Do I need to create an account?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "No account required. You can use Readme Studio immediately."
        }
      }
    ]
  }
  </script>

  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="ambient">
    <div class="blob blob-a"></div>
    <div class="blob blob-b"></div>
    <div class="grid"></div>
  </div>

  <header class="hero hero-intro" id="top">
    <div class="hero-inner">
      <p class="eyebrow">README BUILDER</p>
      <h1>Readme Studio</h1>
      <p class="subhead">A best-practice README builder with presets, clean inputs, and live preview.</p>
      <div class="hero-actions">
      </div>
      <a class="btn btn-cta" href="#editor">Get Started</a>
    </div>
  </header>

  <main class="layout" id="editor">
    <section class="panel builder">
      <div class="panel-header">
        <h2>Basics</h2>
        <p>What it is, who it is for, and why it exists.</p>
      </div>
      <div class="form-grid">
        <label>
          Project Title
          <input id="projectName" type="text" placeholder="e.g. Opacify" />
        </label>
        <label>
          Short Description
          <input id="tagline" type="text" placeholder="One-line value proposition" />
        </label>
        <label class="full">
          Long Description
          <textarea id="description" rows="4" placeholder="What does this project do and who is it for?"></textarea>
        </label>
        <label>
          Repository URL
          <input id="repoUrl" type="url" placeholder="https://github.com/user/repo" />
        </label>
        <label>
          Live Demo URL
          <input id="demoUrl" type="url" placeholder="https://example.com" />
        </label>
        <label>
          Version
          <input id="version" type="text" placeholder="v1.0.0" />
        </label>
        <label>
          Author / Maintainer
          <input id="author" type="text" placeholder="Your name or org" />
        </label>
      </div>

      <div class="panel-header">
        <h2>Highlights</h2>
        <p>Features, tech stack, and output options.</p>
      </div>
      <div class="form-grid">
        <label class="full">
          Features (comma-separated)
          <input id="features" type="text" placeholder="Secure auth, Offline first, Fast setup" />
        </label>
        <label class="full">
          Tech Stack
          <input id="tech" type="hidden" value="" />
          <div class="badge-select" id="techBadgeSelect">
            <button type="button" class="badge-option" data-value="HTML5">HTML5</button>
            <button type="button" class="badge-option" data-value="CSS3">CSS3</button>
            <button type="button" class="badge-option" data-value="JavaScript">JavaScript</button>
            <button type="button" class="badge-option" data-value="TypeScript">TypeScript</button>
            <button type="button" class="badge-option" data-value="React">React</button>
            <button type="button" class="badge-option" data-value="Next.js">Next.js</button>
            <button type="button" class="badge-option" data-value="Vue.js">Vue.js</button>
            <button type="button" class="badge-option" data-value="Angular">Angular</button>
            <button type="button" class="badge-option" data-value="Svelte">Svelte</button>
            <button type="button" class="badge-option" data-value="Node.js">Node.js</button>
            <button type="button" class="badge-option" data-value="Express">Express</button>
            <button type="button" class="badge-option" data-value="Fastify">Fastify</button>
            <button type="button" class="badge-option" data-value="Python">Python</button>
            <button type="button" class="badge-option" data-value="Django">Django</button>
            <button type="button" class="badge-option" data-value="Flask">Flask</button>
            <button type="button" class="badge-option" data-value="FastAPI">FastAPI</button>
            <button type="button" class="badge-option" data-value="Go">Go</button>
            <button type="button" class="badge-option" data-value="Rust">Rust</button>
            <button type="button" class="badge-option" data-value="Java">Java</button>
            <button type="button" class="badge-option" data-value="Spring Boot">Spring Boot</button>
            <button type="button" class="badge-option" data-value="Ruby">Ruby</button>
            <button type="button" class="badge-option" data-value="Rails">Rails</button>
            <button type="button" class="badge-option" data-value="PHP">PHP</button>
            <button type="button" class="badge-option" data-value="Laravel">Laravel</button>
            <button type="button" class="badge-option" data-value="PostgreSQL">PostgreSQL</button>
            <button type="button" class="badge-option" data-value="MySQL">MySQL</button>
            <button type="button" class="badge-option" data-value="MongoDB">MongoDB</button>
            <button type="button" class="badge-option" data-value="Redis">Redis</button>
            <button type="button" class="badge-option" data-value="Docker">Docker</button>
            <button type="button" class="badge-option" data-value="Terraform">Terraform</button>
            <button type="button" class="badge-option" data-value="Firebase">Firebase</button>
            <button type="button" class="badge-option" data-value="Supabase">Supabase</button>
          </div>
          <span class="hint">Click badges to select. Click again to remove.</span>
        </label>
      </div>

      <div class="panel-header">
        <h2>Installation & Usage</h2>
        <p>Help users run the project quickly.</p>
      </div>
      <div class="form-grid">
        <label class="full">
          Installation
          <textarea id="install" rows="4" placeholder="Prerequisites\nSteps to install"></textarea>
        </label>
      </div>

      <div class="panel-header">
        <h2>Advanced</h2>
        <p>Configuration, tests, and deployment details.</p>
      </div>
      <div class="form-grid">
        <label class="full">
          Configuration
          <textarea id="configuration" rows="3" placeholder="Environment variables, config files, defaults"></textarea>
        </label>
        <label class="full">
          Project Structure
          <textarea id="structure" rows="3" placeholder="/src - core logic\n/tests - test suite"></textarea>
        </label>
      </div>

      <div class="panel-header">
        <h2>Optional</h2>
        <p>Screenshots, FAQ, support, and credits.</p>
      </div>
      <div class="form-grid">
        <label class="full">
          Screenshots (image URLs, one per line)
          <textarea id="screenshots" rows="3" placeholder="https://.../shot1.png\nhttps://.../shot2.png"></textarea>
        </label>
        <label>
          License
          <select id="license">
            <option value="">Select license</option>
            <option>MIT</option>
            <option>Apache-2.0</option>
            <option>GPL-3.0</option>
            <option>BSD-3-Clause</option>
            <option>ISC</option>
            <option>MPL-2.0</option>
            <option>LGPL-3.0</option>
            <option>Unlicense</option>
          </select>
        </label>
        <label>
          Contributing URL
          <input id="contribUrl" type="url" placeholder="https://github.com/user/repo/blob/main/CONTRIBUTING.md" />
        </label>
        <label class="full">
          Support
          <textarea id="support" rows="3" placeholder="How to get help, contact channels, issue tracker"></textarea>
        </label>
        <div class="full faq-block" id="faqBlock">
          <div class="faq-header">
            <span>FAQ</span>
            <button type="button" class="btn btn-ghost btn-small" id="btnAddFaq">Add Question</button>
          </div>
          <div class="faq-list" id="faqList">
            <div class="faq-item">
              <input class="faq-question" type="text" placeholder="Question" />
              <textarea class="faq-answer" rows="2" placeholder="Answer"></textarea>
            </div>
          </div>
        </div>
        <label class="full">
          Connect With Me
          <div class="form-grid">
            <label>
              GitHub
              <input id="socialGithub" type="url" placeholder="https://github.com/username" />
            </label>
            <label>
              CodePen
              <input id="socialCodepen" type="url" placeholder="https://codepen.io/username" />
            </label>
            <label>
              Medium
              <input id="socialMedium" type="url" placeholder="https://medium.com/@username" />
            </label>
            <label>
              Telegram
              <input id="socialTelegram" type="url" placeholder="https://t.me/username" />
            </label>
            <label>
              Instagram
              <input id="socialInstagram" type="url" placeholder="https://instagram.com/username" />
            </label>
            <label>
              Pinterest
              <input id="socialPinterest" type="url" placeholder="https://pinterest.com/username" />
            </label>
          </div>
        </label>
        <label class="full">
          Author & Credits
          <textarea id="credits" rows="3" placeholder="Maintainer, contributors, third-party credits"></textarea>
        </label>
        <label class="full">
          Acknowledgements
          <textarea id="acknowledgements" rows="3" placeholder="Inspiration, libraries, resources"></textarea>
        </label>
      </div>

      <div class="wizard-actions">
        <div class="autosave" id="autosaveStatus">Saved</div>
        <button class="btn btn-ghost" id="btnOpenPreview">Open Preview</button>
        <button class="btn btn-muted" id="btnReset">Reset</button>
      </div>
    </section>

    <section class="panel preview is-collapsed" id="previewPanel">
      <div class="panel-header">
        <h2>Live Preview</h2>
        <p>Rendered output updates instantly.</p>
      </div>
      <div class="preview-toolbar">
        <span class="pill" id="wordCount">0 words</span>
        <span class="pill" id="charCount">0 chars</span>
        <button class="btn btn-ghost" id="btnPreview">Exit Fullscreen</button>
        <button class="btn btn-muted" id="btnToggle">Show Markdown</button>
        <button class="btn btn-primary btn-copy-markdown" id="btnCopyMarkdownView">Copy Markdown</button>
      </div>
      <div class="preview-empty" id="previewEmpty">
        <h3>Preview hidden</h3>
        <p>Click "Open Preview" to render your README in full screen.</p>
      </div>
      <div class="preview-box" id="preview"></div>
      <pre class="preview-code is-hidden"><code id="previewCode"></code></pre>
    </section>
  </main>

  <footer class="footer">
    <p>Built for coder - developed by thisizasif </p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/dompurify@3.0.6/dist/purify.min.js"></script>
  <script src="script.js"></script>
</body>
</html>