# Frontend Widgets
[![Browser](https://img.shields.io/badge/%F0%9F%8C%8D%20Browser-111111?style=for-the-badge)](#browser) [![Art & Color](https://img.shields.io/badge/%F0%9F%8E%A8%20Art%20%26%20Color-111111?style=for-the-badge)](#art-color) [![Code Generators](https://img.shields.io/badge/%F0%9F%93%9D%20Code%20Generators-111111?style=for-the-badge)](#code-generators) [![Quizzes](https://img.shields.io/badge/%E2%9D%93Quizzes-111111?style=for-the-badge)](#quizzes) [![Email](https://img.shields.io/badge/%F0%9F%93%A7Email-111111?style=for-the-badge)](#email) [![Images](https://img.shields.io/badge/%E2%9C%A8Images-111111?style=for-the-badge)](#images) [![Games](https://img.shields.io/badge/%F0%9F%A7%A9Games-111111?style=for-the-badge)](#games) [![Writing](https://img.shields.io/badge/%F0%9F%91%89Writing-111111?style=for-the-badge)](#writing) 

A curated collection of simple, standalone **HTML + CSS + JavaScript** projects you can **download, customize, and remix**.  
Everything here is designed to be **copy‑paste friendly**, with minimal dependencies.

---

## Art & Color

<details>
<summary>Personal Palette Generator</summary>

Choose your favorites with color picker + generate your custom palette.

<img src="https://raw.githubusercontent.com/monapdx/Frontend-Widgets/refs/heads/main/img/personal-palette.gif">

</details>

<details>
<summary>Pixel Art Palette Extractor</summary>

Upload pixel art ---> color palette extracted.

<img src="https://raw.githubusercontent.com/monapdx/Frontend-Widgets/refs/heads/main/img/pixel-palette-extractor.gif">

</details>

<details>
<summary>Random Color Palette Generator</summary>

Dead simple random color palette generator.

</details>

<details>
<summary>Pixel Drawing Board</summary>

Drawing board + editor for creating + exporting pixel art.

<img src="https://raw.githubusercontent.com/monapdx/Frontend-Widgets/refs/heads/main/img/pixel-art-drawing-board.gif">

</details>

<details>
<summary>Pixel Art to SVG</summary>

Upload a pixel art image ---> convert to SVG.

</details>

<details>
<summary>HEX Color to Tailwind Classes</summary>

Choose a HEX color ---> get Tailwind classes.

</details>

## Browser

<details>
<summary>Offline ChatGPT</summary>

<img src="img/offline-gpt.gif">

Load + browse your ChatGPT conversations.json offline.

</details>

<details>
<summary>Snippet Saver</summary>

<img src="img/snippet-saver.gif">

Save + delete notes & snippets right in the browser.

</details>

<details>
<summary>Voice Recorder</summary>

<img src="img/voice-recorder.gif">

Record + download audio and voice notes right in the browser.

</details>

## Code Generators

<details>
<summary>Scratch-it Generator</summary>

<img src="img/scratch-off.gif">

Upload your own image and generate a scratch-it card.

</details>

<details>
<summary>Link List Generator</summary>

HTML list of links generator with optional CSS class + placeholder text.

</details>

<details>
<summary>URL to QR Code</summary>

URL ---> QR code.

</details>

<details>
<summary>Editable Table Generator</summary>

<img src="img/editable-table-generator.gif">

Columns + rows + headings = generate custom HTML table. Click in any table cell to edit content.

</details>

<details>
<summary>HTML Pattern Generator</summary>

Generate instances of HTML patterns with placeholders.

</details>

<details>
<summary>Alt Text Generator</summary>

Upload image ---> describe ---> generate ALT text.

</details>

<details>
<summary>Quiz Builder</summary>

<img src="img/quiz-builder.gif">

Dead simple + fast quiz generator.

</details>

<details>
<summary>Button Generator</summary>

Yet another frontend button generator. Export as code or PNG.

</details>

<details>
<summary>Fake Data Generator</summary>

Write schema ---> generate fake data ---> export.

</details>

<details>
<summary>File Naming Generator</summary>

Choose file naming conventions ---> generate file names. 

</details>


<details>
<summary>Payment Button Generator</summary>

Generate payment & buy buttons for selling platforms like Paypal, Stripe, Shopify and more.

</details>

<details>
<summary>Static Calendar Generator</summary>

Upload an .ics file and generate a static archive of your Google Calendar.

</details>

<details>
<summary>RegEx Explainer</summary>

Enter RegEx ---> decode in plain English.

</details>

<details>
<summary>Countdown Generator</summary>

Choose color + Enter date/time + URL.

</details>

<details>
<summary>Word Definition Generator</summary>

Enter word + part of speech + custom definition ---> generate dictionary formatted entry. 

</details>

<details>
<summary>Chat Message Generator</summary>

Enter sender + recipient names + messages = chat app animation. 

</details>

<details>
<summary>JSON to Typescript</summary>

<img src="img/json-to-typescript.gif">

Upload a JSON file ---> get Typescript types.

</details>

<details>
<summary>CSV to SQL Generator</summary>

<img src="img/csv-to-sql.gif">

Upload CSV ---> SQL.

</details>

## Quizzes

<details>
<summary>HumorDNA</summary>

A fun + silly quiz to explore your humor style.

</details>

<details>
<summary>Philosophical Alignment Quiz</summary>

A fun + informative philosophy quiz.

</details>

<details>
<summary>HTML5 Tags Quiz</summary>

How many of the 110 HTML5 elements can you name?

</details>

<details>
<summary>Spreadsheet Quiz Generator</summary>

Add sections, questions, responses, point values + export to CSV or JSON.

</details>

## Email

<details>
<summary>Email Inbox Viewer</summary>

<img src="img/mbox-viewer.gif">

Load + browse any .mbox file.

</details>

## Images

<details>
<summary>Quote Graphic Generator</summary>


Enter favorite quotes + choose font + pick gradient colors = export image.

<img src="https://raw.githubusercontent.com/monapdx/Frontend-Widgets/refs/heads/main/img/quote-image-generator.gif">


</details>

<details>
<summary>Hero Diagram Generator</summary>

Generate custom pipeline visualizations + export as SVG.

</details>

<details>
<summary>Placeholder Image Generator</summary>

Input dimensions + prompt + style = placeholder image.

</details>

<details>
<summary>Folder Structure Visualizer</summary>

Create directory tree diagrams of your projects + export as .txt, .json, .md, PNG or SVG.

</details>

## Games

<details>
<summary>Boggle Board Generator</summary>

Boggle board generator with timer & basic scoring. 

</details>

## Writing

<details>
<summary>Poetry Squared</summary>

Challenge yourself to write a poem that reads the same both horizontally + vertically.

</details>

<details>
<summary>Rhyme Finder</summary>

<img src="img/rhyme-search.gif">

Advanced search for rhyming words via the Datamuse API.

</details>

<details>
<summary>Cookbook Formatter</summary>

Easily format + generate Kindle-ready cookbooks.

</details>

## Github

<details>
<summary>Github Topics Cloud Generator</summary>

Enter any Github username to generate a tag cloud of their most frequently used Topics.

</details>

<details>
<summary>YAML Form Generator</summary>

Generate .yml forms for Github.

</details>

<details>
<summary>Github Button Generator</summary>

Generate markdown buttons for Github.

</details>

<details>
<summary>Github Link Generator</summary>

Generate and customize Github links based on URL patterns.

</details>

---

## License

Unless otherwise noted inside a project folder, this repository is released under the **MIT License**.  
You can use these projects in personal or commercial work with attribution preferred but not required. See **[LICENSE](LICENSE)**.