{"id":18035465,"url":"https://github.com/nstechbytes/mini-formatter","last_synced_at":"2025-04-04T23:24:04.037Z","repository":{"id":260100533,"uuid":"871832700","full_name":"NSTechBytes/Mini-Formatter","owner":"NSTechBytes","description":"**Mini Formatter** is a lightweight and user-friendly Chrome extension designed to format your CSS, HTML, and JavaScript code directly within the browser. Whether you're pasting code, uploading a local file, or working with web-based projects, Mini Formatter ensures that your code is clean, readable, and properly formatted.","archived":false,"fork":false,"pushed_at":"2024-10-13T04:22:02.000Z","size":109,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-10T07:45:07.636Z","etag":null,"topics":["chrome","chrome-extension","css","formatter","html","js","stylish"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NSTechBytes.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-13T04:14:53.000Z","updated_at":"2024-10-13T04:22:20.000Z","dependencies_parsed_at":"2024-10-29T15:09:32.532Z","dependency_job_id":null,"html_url":"https://github.com/NSTechBytes/Mini-Formatter","commit_stats":null,"previous_names":["nstechbytes/mini-formatter"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NSTechBytes%2FMini-Formatter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NSTechBytes%2FMini-Formatter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NSTechBytes%2FMini-Formatter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NSTechBytes%2FMini-Formatter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NSTechBytes","download_url":"https://codeload.github.com/NSTechBytes/Mini-Formatter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247263411,"owners_count":20910400,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chrome","chrome-extension","css","formatter","html","js","stylish"],"created_at":"2024-10-30T12:07:39.570Z","updated_at":"2025-04-04T23:24:04.016Z","avatar_url":"https://github.com/NSTechBytes.png","language":"JavaScript","readme":"\n\n# Mini Formatter - A Stylish Chrome Code Formatter\n\n**Mini Formatter** is a lightweight and user-friendly Chrome extension designed to format your CSS, HTML, and JavaScript code directly within the browser. Whether you're pasting code, uploading a local file, or working with web-based projects, Mini Formatter ensures that your code is clean, readable, and properly formatted.\n\nThis extension includes a modern, stylish interface with a dark mode option, local file loading, copy-to-clipboard functionality, and downloadable formatted code. Built with simplicity in mind, it integrates seamlessly into your daily workflow without complicated setup or unnecessary features.\n\n---\n\n## Table of Contents\n\n- [Features](#features)\n- [Installation](#installation)\n- [Usage](#usage)\n- [Keyboard Shortcuts](#keyboard-shortcuts)\n- [Extension Permissions](#extension-permissions)\n- [Screenshots](#screenshots)\n- [Development](#development)\n- [Contributing](#contributing)\n- [License](#license)\n\n---\n\n## Features\n\n### 1. **Code Formatting**\nMini Formatter automatically formats HTML, CSS, and JavaScript code. It utilizes the `js-beautify` library to beautify your code with proper indentation and spacing, making it easier to read and work with.\n\n- **Supported Code Formats**: \n    - HTML\n    - CSS\n    - JavaScript\n- **Auto-Detection**: No need to select the file type. The extension auto-detects the format and applies appropriate formatting rules.\n  \n### 2. **Load Code from Local Files**\nYou can upload local `.html`, `.css`, or `.js` files directly into the extension, where the content will be loaded and formatted.\n\n- **Supported File Types**: `.html`, `.css`, `.js`\n- **File Input**: Browse for files or drag-and-drop them directly into the extension.\n\n### 3. **Copy to Clipboard**\nAfter formatting your code, you can easily copy it to the clipboard with a single click. A notification confirms when the code is successfully copied.\n\n### 4. **Download Formatted Code**\nOnce formatted, you can download your code in `.txt` format. The extension ensures that the file is saved with your formatted code, providing a handy way to back up your work or share it with others.\n\n### 5. **Dark Mode**\nToggle between light and dark mode with the click of a button. Dark mode provides a sleek, modern aesthetic for those who prefer working with darker interfaces.\n\n### 6. **Stylish User Interface**\nThe extension is designed with a clean, modern layout. Buttons are intuitive, icons are provided via Font Awesome, and the overall aesthetic is visually appealing and functional.\n\n---\n\n\n\n### Manual Installation\n1. Clone or download the repository:\n   ```bash\n   git clone https://github.com/NSTechBytes/Mini-Formatter.git\n   ```\n2. Open Chrome and go to `chrome://extensions/`.\n3. Enable \"Developer mode\" (toggle is in the upper right corner).\n4. Click on \"Load unpacked\" and select the folder where you cloned the repository.\n5. The Mini Formatter extension will appear in your Chrome extensions bar.\n\n---\n\n## Usage\n\n1. **Open the Extension**: Click on the Mini Formatter icon from your Chrome toolbar.\n2. **Input Code**:\n    - Paste your CSS, HTML, or JavaScript code into the provided textarea.\n    - Or, click the \"Choose File\" button to upload a file from your local system.\n3. **Format**: Press the \"Format Code\" button. The code will automatically be beautified and displayed in the lower textarea.\n4. **Copy or Download**:\n    - Copy the formatted code to your clipboard using the \"Copy\" button.\n    - Download the formatted code in `.txt` format using the \"Download\" button.\n5. **Dark Mode**: Toggle the dark mode using the switch in the upper right corner of the extension.\n\n---\n\n## Keyboard Shortcuts\n\n- **Ctrl + C** (Cmd + C on Mac): Copy the formatted code to the clipboard.\n- **Enter**: Format the code once the input is provided.\n- **Esc**: Close the extension.\n\n---\n\n## Extension Permissions\n\nMini Formatter only requires permission to access local files. This is necessary for the \"Choose File\" functionality, which allows you to load code from your computer.\n\nThe extension does **not** collect or send any user data. Your code is processed locally within the browser.\n\n---\n\n## Screenshots\n\n### Light Mode\n![Light Mode Screenshot](https://github.com/NSTechBytes/Projects-Templates/blob/main/Extensions/Mini%20Formatter/Light.png)\n\n### Dark Mode\n![Dark Mode Screenshot](https://github.com/NSTechBytes/Projects-Templates/blob/main/Extensions/Mini%20Formatter/Dark.png)\n\n---\n\n## Development\n\n### Prerequisites\n\nTo build the Mini Formatter extension from source, you'll need the following installed:\n\n- [Node.js](https://nodejs.org/en/) (v12 or higher)\n- [npm](https://www.npmjs.com/)\n\n### Cloning the Repository\n```bash\ngit clone https://github.com/NSTechBytes/Mini-Formatter.git\ncd mini-formatter\n```\n\n### Local Development\n1. Run `npm install` to install dependencies.\n2. Run the extension in development mode by following the \"Manual Installation\" steps mentioned above.\n3. Make your changes and test them directly by reloading the extension in Chrome.\n\n### Building for Production\nRun the following command to create a production-ready build of the extension:\n```bash\nnpm run build\n```\nThis will create a `dist/` folder with all the necessary files to upload to the Chrome Web Store.\n\n---\n\n## Contributing\n\nContributions are welcome! If you have suggestions, bug fixes, or new features, feel free to open an issue or submit a pull request. Here's how you can contribute:\n\n1. Fork the repository.\n2. Create a new branch for your feature/bug fix:\n   ```bash\n   git checkout -b feature/your-feature-name\n   ```\n3. Make your changes and test them locally.\n4. Commit and push your changes:\n   ```bash\n   git commit -m \"Add some feature\"\n   git push origin feature/your-feature-name\n   ```\n5. Open a pull request on GitHub.\n\n---\n\n## License\n\nThis project is licensed under the MIT License. You can view the license file [here](LICENSE).\n\n---\n\n## Acknowledgments\n\n- [js-beautify](https://github.com/beautify-web/js-beautify) - The open-source code beautifier used for formatting CSS, HTML, and JS.\n- [Font Awesome](https://fontawesome.com/) - The icons used in the extension.\n- Inspiration from various formatting tools and extensions available online.\n\n---\n\nBy using **Mini Formatter**, you'll have an efficient, stylish, and straightforward way to beautify your code, making it easier to maintain and share. Whether you're a seasoned developer or just starting, Mini Formatter will simplify your workflow and enhance your productivity.\n\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstechbytes%2Fmini-formatter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnstechbytes%2Fmini-formatter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnstechbytes%2Fmini-formatter/lists"}