{"id":19724613,"url":"https://github.com/maykbrito/fronteditorv2","last_synced_at":"2025-05-16T05:06:49.931Z","repository":{"id":38379684,"uuid":"362867866","full_name":"maykbrito/fronteditorv2","owner":"maykbrito","description":"⚡️ Empower creativity with seamless code editing!","archived":false,"fork":false,"pushed_at":"2025-04-22T12:24:17.000Z","size":5135,"stargazers_count":379,"open_issues_count":9,"forks_count":49,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-05-12T12:53:43.428Z","etag":null,"topics":["frontend","javascript","monaco-editor","react","typescript"],"latest_commit_sha":null,"homepage":"https://fronteditor.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/maykbrito.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-04-29T15:44:05.000Z","updated_at":"2025-05-04T15:29:10.000Z","dependencies_parsed_at":"2024-04-02T17:46:39.516Z","dependency_job_id":"240a98e9-b1d3-4774-a6c6-4ec0b496569d","html_url":"https://github.com/maykbrito/fronteditorv2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykbrito%2Ffronteditorv2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykbrito%2Ffronteditorv2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykbrito%2Ffronteditorv2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/maykbrito%2Ffronteditorv2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/maykbrito","download_url":"https://codeload.github.com/maykbrito/fronteditorv2/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254471061,"owners_count":22076585,"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":["frontend","javascript","monaco-editor","react","typescript"],"created_at":"2024-11-11T23:26:27.896Z","updated_at":"2025-05-16T05:06:44.923Z","avatar_url":"https://github.com/maykbrito.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n    \u003cimg src=\"./src/assets/logo.svg\" align=\"center\" width=\"50\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003ch1 align=\"center\"\u003eFRONTEDITOR.DEV\u003c/h1\u003e\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003cem\u003eEmpower creativity with seamless code editing!\u003c/em\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/last-commit/maykbrito/fronteditorv2?style=default\u0026logo=git\u0026logoColor=white\u0026color=0080ff\" alt=\"last-commit\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/languages/top/maykbrito/fronteditorv2?style=default\u0026color=0080ff\" alt=\"repo-top-language\"\u003e\n\t\u003cimg src=\"https://img.shields.io/github/languages/count/maykbrito/fronteditorv2?style=default\u0026color=0080ff\" alt=\"repo-language-count\"\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\u003c!-- default option, no dependency badges. --\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n\t\u003c!-- default option, no dependency badges. --\u003e\n\u003c/p\u003e\n\u003cbr\u003e\n\n---\n## Preview Demo\n\n\n\nhttps://github.com/user-attachments/assets/b3e3d6bb-7429-4e55-9fb9-3b002a11e0a3\n\n\n\n---\n\n##  Table of Contents\n\n- [ Overview](#-overview)\n- [ Features](#-features)\n- [ Tecnologies](#-technologies)\n- [ Project Structure](#-project-structure)\n  - [ Project Index](#-project-index)\n- [ Getting Started](#-getting-started)\n  - [ Prerequisites](#-prerequisites)\n  - [ Installation](#-installation)\n  - [ Usage](#-usage)\n- [ Project Roadmap](#-project-roadmap)\n- [ Contributing](#-contributing)\n- [ Thanks](#-thanks)\n\n---\n\n##  Overview\n\nFronteditor is a cutting-edge open-source project designed to streamline web development workflows. It simplifies code editing and live previewing, enhancing user experience and productivity. Ideal for developers seeking efficient content creation and seamless integration of external resources. Empower your web projects with Fronteditor's intuitive features and flexible customization options.\n\n---\n\n##  Features\n- **Code Editing**: Effortlessly edit and preview HTML, CSS, and JavaScript code.\n- **Live Preview**: Witness real-time updates as you code.\n- **Customization**: Tailor the editor to your preferences using those [url params](#url-params).\n- **User-Friendly**: Intuitive interface for a seamless experience.\n- **Unlimited Projects**: You can use pathname `/anything` to start a new empty project\n\n### URL Params\n- hideTabs: html | css | javascript | markdown\n- logo: false\n- previewOnly: true\n- vertical: true\n- editorOnly: true\n- reverse: true\n- theme: vs | vs-dark\n- lineNumbers: on | off\n\n---\n\n## Tecnologies\n\n- **Programming Language**: TypeScript\n- **Package Manager**: Npm, Yarn\n- **UI Framework**: React\n- **Styling**: Tailwind CSS, Shadcn-ui\n- **Code Editor**: Monaco Editor\n\n---\n\n##  Project Structure\n\n```sh\n└── fronteditorv2/\n    ├── README.md\n    ├── biome.json\n    ├── components.json\n    ├── index.html\n    ├── package.json\n    ├── postcss.config.js\n    ├── src\n    │   ├── App.tsx\n    │   ├── assets\n    │   ├── components\n    │   ├── contexts\n    │   ├── hooks\n    │   ├── lib\n    │   ├── main.tsx\n    │   ├── styles\n    │   ├── utils\n    │   └── vite-env.d.ts\n    ├── tailwind.config.js\n    ├── tsconfig.json\n    ├── tsconfig.node.json\n    ├── vercel.json\n    ├── vite.config.ts\n    └── yarn.lock\n```\n\n\n###  Project Index\n\u003cdetails open\u003e\n\t\u003csummary\u003e\u003cb\u003e\u003ccode\u003eFRONTEDITORV2/\u003c/code\u003e\u003c/b\u003e\u003c/summary\u003e\n\t\u003cdetails\u003e \u003c!-- __root__ Submodule --\u003e\n\t\t\u003csummary\u003e\u003cb\u003e__root__\u003c/b\u003e\u003c/summary\u003e\n\t\t\u003cblockquote\u003e\n\t\t\t\u003ctable\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/tsconfig.node.json'\u003etsconfig.node.json\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Enables TypeScript configuration for Node.js environment in the project\u003cbr\u003e- Supports ESNext module format and Node module resolution\u003cbr\u003e- Defines base URL and path aliases for cleaner imports\u003cbr\u003e- Includes Vite configuration file for build setup.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/package.json'\u003epackage.json\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Facilitates project build, development, and linting tasks\u003cbr\u003e- Manages dependencies and scripts for Vite, TypeScript, ESLint, and TailwindCSS\u003cbr\u003e- Enables seamless development experience and efficient codebase maintenance.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/components.json'\u003ecomponents.json\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Define project aliases and configurations for styling, TypeScript, and Tailwind CSS in the components.json file\u003cbr\u003e- This file sets up key project settings like component paths and global styles, enhancing code organization and maintainability within the architecture.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/vercel.json'\u003evercel.json\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eRedirects all incoming requests to the root path, ensuring a consistent entry point for the project.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/biome.json'\u003ebiome.json\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Defines configuration settings for code formatting, linting, and file organization\u003cbr\u003e- Specifies rules for JavaScript formatting, linter configurations, and file overrides\u003cbr\u003e- Organizes imports, sets formatting styles, and enables/disables specific linting rules\u003cbr\u003e- Includes overrides for specific file paths.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/tsconfig.json'\u003etsconfig.json\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Defines TypeScript compiler settings for the project, targeting ESNext with strict type checking and module resolution for Node\u003cbr\u003e- Maps aliases for paths in the source code directory\u003cbr\u003e- Integrates with React JSX syntax and references a separate tsconfig file for Node-specific settings.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/postcss.config.js'\u003epostcss.config.js\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Configures PostCSS plugins Tailwind CSS and Autoprefixer for the project's build process, ensuring consistent styling and browser compatibility\u003cbr\u003e- This file plays a crucial role in defining the CSS processing pipeline within the project architecture.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/tailwind.config.js'\u003etailwind.config.js\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Enhances Tailwind CSS configuration by enabling JIT mode, dark mode support, and customizing grid columns, border radius, and colors\u003cbr\u003e- Includes the Tailwind CSS Animate plugin for additional functionality\u003cbr\u003e- The file specifies the content paths for stylesheets, contributing to a more efficient and tailored styling setup within the project architecture.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/index.html'\u003eindex.html\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- The index.html file serves as the entry point for the front-end editor, defining the structure and initial content of the web page\u003cbr\u003e- It includes essential metadata, links to external resources, and references the main TypeScript file for the application logic\u003cbr\u003e- This file sets the foundation for the user interface and functionality of the editor within the project architecture.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/vite.config.ts'\u003evite.config.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003eConfigures Vite to use React and sets up an alias for the project's source directory.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003c/table\u003e\n\t\t\u003c/blockquote\u003e\n\t\u003c/details\u003e\n\t\u003cdetails\u003e \u003c!-- src Submodule --\u003e\n\t\t\u003csummary\u003e\u003cb\u003esrc\u003c/b\u003e\u003c/summary\u003e\n\t\t\u003cblockquote\u003e\n\t\t\t\u003ctable\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/vite-env.d.ts'\u003evite-env.d.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Defines Vite client types for the project, ensuring seamless integration with Vite's development server\u003cbr\u003e- This declaration in vite-env.d.ts enhances the codebase architecture by providing necessary type references for Vite's client-side functionality.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/main.tsx'\u003emain.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Renders the React application by creating a root element and rendering the main App component within a StrictMode wrapper\u003cbr\u003e- This file serves as the entry point for the React application, initializing the rendering process and setting up the initial UI structure.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003ctr\u003e\n\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/App.tsx'\u003eApp.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\u003ctd\u003e- Enables content editing within a structured context by providing an editor component wrapped in a content context provider\u003cbr\u003e- This setup ensures seamless management and interaction with the editor content throughout the application.\u003c/td\u003e\n\t\t\t\u003c/tr\u003e\n\t\t\t\u003c/table\u003e\n\t\t\t\u003cdetails\u003e\n\t\t\t\t\u003csummary\u003e\u003cb\u003elib\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/lib/utils.ts'\u003eutils.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003eEnhances class value handling by merging and combining CSS classes efficiently.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\u003c/details\u003e\n\t\t\t\u003cdetails\u003e\n\t\t\t\t\u003csummary\u003e\u003cb\u003ecomponents\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/CustomEditor.tsx'\u003eCustomEditor.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- Defines a responsive code editor component that integrates Monaco Editor for HTML, CSS, JavaScript, or Markdown\u003cbr\u003e- Handles editor initialization, content changes, and display options based on URL parameters and user interactions\u003cbr\u003e- Utilizes context for state management and storage for persistent data\u003cbr\u003e- Supports dynamic line number visibility and customizable theming.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\t\u003cdetails\u003e\n\t\t\t\t\t\t\u003csummary\u003e\u003cb\u003ePreview\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/Preview/preview-iframe.tsx'\u003epreview-iframe.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- The `PreviewIframe` function renders an iframe element to display a preview of content specified by the `src` prop\u003cbr\u003e- This component plays a crucial role in the project's architecture by enabling the seamless integration of external content within the application's interface.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/Preview/index.tsx'\u003eindex.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Generates a live preview of HTML, CSS, and JavaScript code input by the user\u003cbr\u003e- Utilizes React hooks to manage state and trigger updates\u003cbr\u003e- Supports live reload functionality and displays the preview in an iframe\u003cbr\u003e- Handles page title and icon extraction for a more interactive user experience.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/Preview/Header.tsx'\u003eHeader.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- The Header component renders a customizable window title with an optional icon and a live reload toggle switch\u003cbr\u003e- It allows users to enable or disable automatic page reloading\u003cbr\u003e- The component's design and functionality enhance the user experience by providing visual cues and interactive controls for managing live reload settings.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\t\t\u003c/details\u003e\n\t\t\t\t\t\u003cdetails\u003e\n\t\t\t\t\t\t\u003csummary\u003e\u003cb\u003eui\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/ui/button.tsx'\u003ebutton.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Defines a Button component with customizable variants and sizes for UI consistency\u003cbr\u003e- Integrates with React and Radix UI, offering flexibility in styling and functionality\u003cbr\u003e- Promotes reusability and maintainability across the codebase architecture.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/ui/resizable.tsx'\u003eresizable.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003eDefines resizable panel components for flexible UI layout management within the project architecture.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/ui/switch.tsx'\u003eswitch.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Defines a custom Switch component using React and Radix UI\u003cbr\u003e- The component handles styling and behavior for a toggle switch element\u003cbr\u003e- It enhances accessibility and user interaction by providing a visually appealing and functional switch interface\u003cbr\u003e- This component encapsulates switch functionality for seamless integration within the project's UI components.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/ui/dropdown-menu.tsx'\u003edropdown-menu.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Facilitates creation of customizable dropdown menus with various interactive elements like items, checkboxes, and radio buttons\u003cbr\u003e- Enables easy integration of dropdown functionality into React applications, enhancing user experience and interface flexibility within the project's UI components.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\t\t\u003c/details\u003e\n\t\t\t\t\t\u003cdetails\u003e\n\t\t\t\t\t\t\u003csummary\u003e\u003cb\u003eDropdownMenu\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/DropdownMenu/download-zip.tsx'\u003edownload-zip.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Generates a downloadable zip file containing HTML, CSS, JavaScript, and Markdown files from the editor content\u003cbr\u003e- Parses HTML, adds scripts, and creates a zip file with the content\u003cbr\u003e- Enables users to download the zip file with the frontend editor content.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/DropdownMenu/index.tsx'\u003eindex.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Implements a dropdown menu component for user interactions, featuring options like downloading files and accessing account settings\u003cbr\u003e- The component enhances user experience by providing a visually appealing and functional menu interface within the project's architecture.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\t\t\u003c/details\u003e\n\t\t\t\t\t\u003cdetails\u003e\n\t\t\t\t\t\t\u003csummary\u003e\u003cb\u003eMEditor\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/MEditor/TabButton.tsx'\u003eTabButton.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Defines a reusable TabButton component for selecting different tabs within the editor interface\u003cbr\u003e- It handles tab selection based on user interaction and updates the visual styling to indicate the currently selected tab\u003cbr\u003e- This component enhances the user experience by providing a clear and intuitive way to navigate between different content tabs in the editor.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/components/MEditor/index.tsx'\u003eindex.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\t\t\u003ctd\u003e- Enables dynamic rendering of a multi-tab editor interface with optional preview mode\u003cbr\u003e- Handles tab selection, editor-only view, and resizable panel layout based on URL parameters\u003cbr\u003e- Supports customization through tab configuration and displays a logo with external link\u003cbr\u003e- Integrates with external components for enhanced functionality.\u003c/td\u003e\n\t\t\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\t\t\u003c/details\u003e\n\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\u003c/details\u003e\n\t\t\t\u003cdetails\u003e\n\t\t\t\t\u003csummary\u003e\u003cb\u003econtexts\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/contexts/EditorContentContext.tsx'\u003eEditorContentContext.tsx\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- Manages the state and functionality of the editor, including loading grammars, handling value changes, and defining editor themes\u003cbr\u003e- Integrates with Monaco Editor and emmet-monaco-es for a seamless editing experience\u003cbr\u003e- Handles key commands for saving and initializes editor settings upon mount.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\u003c/details\u003e\n\t\t\t\u003cdetails\u003e\n\t\t\t\t\u003csummary\u003e\u003cb\u003estyles\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/styles/global.css'\u003eglobal.css\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- Define global styles and configurations for the project, including Tailwind CSS utilities and base styles\u003cbr\u003e- Set root variables and apply base styles to the body element.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\u003c/details\u003e\n\t\t\t\u003cdetails\u003e\n\t\t\t\t\u003csummary\u003e\u003cb\u003eutils\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/utils/monaco-tm-registry.ts'\u003emonaco-tm-registry.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- Defines a registry for Monaco TextMate grammars, enabling syntax highlighting for JavaScript, CSS, HTML, and Markdown files within the codebase\u003cbr\u003e- The registry fetches and provides grammar definitions based on the file's scope, enhancing the editor's language support.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/utils/base-64-encode-unicode.ts'\u003ebase-64-encode-unicode.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003eEncode Unicode strings to base64 for secure data transmission in the project architecture.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/utils/Gist.ts'\u003eGist.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- The `Gist.ts` file in the `utils` directory provides functions to check if the URL includes a gist, determine if it's a view-only gist, and fetch gist content from the GitHub API\u003cbr\u003e- This code facilitates the retrieval of HTML, CSS, JavaScript, and Markdown content for a gist based on the URL path.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/utils/Storage.ts'\u003eStorage.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- Manages and stores content for the front-end editor in local storage\u003cbr\u003e- Handles adding, retrieving, and removing content based on the current URL path\u003cbr\u003e- The file defines initial state structure and functions for interacting with the stored data.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/utils/FormatCodeToIframe.ts'\u003eFormatCodeToIframe.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- FormatCodeToIframe.ts in src/utils/ serves to transform code snippets into iframe-ready formats\u003cbr\u003e- It structures the input code into HTML, CSS, and JavaScript segments for seamless embedding into iframes within the project architecture.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\u003c/details\u003e\n\t\t\t\u003cdetails\u003e\n\t\t\t\t\u003csummary\u003e\u003cb\u003ehooks\u003c/b\u003e\u003c/summary\u003e\n\t\t\t\t\u003cblockquote\u003e\n\t\t\t\t\t\u003ctable\u003e\n\t\t\t\t\t\u003ctr\u003e\n\t\t\t\t\t\t\u003ctd\u003e\u003cb\u003e\u003ca href='https://github.com/maykbrito/fronteditorv2/blob/master/src/hooks/useToggle.ts'\u003euseToggle.ts\u003c/a\u003e\u003c/b\u003e\u003c/td\u003e\n\t\t\t\t\t\t\u003ctd\u003e- Enables toggling functionality with customizable initial state and onChange callback\u003cbr\u003e- Maintains the current state and triggers the callback when toggled\u003cbr\u003e- Enhances reusability and flexibility in managing toggle states across components.\u003c/td\u003e\n\t\t\t\t\t\u003c/tr\u003e\n\t\t\t\t\t\u003c/table\u003e\n\t\t\t\t\u003c/blockquote\u003e\n\t\t\t\u003c/details\u003e\n\t\t\u003c/blockquote\u003e\n\t\u003c/details\u003e\n\u003c/details\u003e\n\n---\n##  Getting Started\n\n###  Prerequisites\n\nBefore getting started with fronteditorv2, ensure your runtime environment meets the following requirements:\n\n- **Programming Language:** TypeScript\n- **Package Manager:** Npm, Yarn\n\n\n###  Installation\n\nInstall fronteditorv2 using one of the following methods:\n\n**Build from source:**\n\n1. Clone the fronteditorv2 repository:\n```sh\n❯ git clone https://github.com/maykbrito/fronteditorv2\n```\n\n2. Navigate to the project directory:\n```sh\n❯ cd fronteditorv2\n```\n\n3. Install the project dependencies:\n\n\n**Using `npm`** \u0026nbsp; [\u003cimg align=\"center\" src=\"https://img.shields.io/badge/npm-CB3837.svg?style={badge_style}\u0026logo=npm\u0026logoColor=white\" /\u003e](https://www.npmjs.com/)\n\n```sh\n❯ npm install\n```\n\n\n**Using `yarn`** \u0026nbsp; [\u003cimg align=\"center\" src=\"\" /\u003e]()\n\n```sh\n❯ yarn install\n```\n\n###  Usage\nRun fronteditorv2 using the following command:\n**Using `npm`** \u0026nbsp; [\u003cimg align=\"center\" src=\"https://img.shields.io/badge/npm-CB3837.svg?style={badge_style}\u0026logo=npm\u0026logoColor=white\" /\u003e](https://www.npmjs.com/)\n\n```sh\n❯ npm run dev\n```\n\n\n**Using `yarn`** \u0026nbsp; [\u003cimg align=\"center\" src=\"\" /\u003e]()\n\n```sh\n❯ yarn dev\n```\n\n---\n##  Project Roadmap\n\n- [ ] **`User Account`**: Add user account.\n- [ ] **`Copilot`**: Use IA to act as copilot.\n\n---\n\n##  Contributing\n\n- **🐛 [Report Issues](https://github.com/maykbrito/fronteditorv2/issues)**: Submit bugs found or log feature requests for the `fronteditorv2` project.\n\n\u003cdetails closed\u003e\n\u003csummary\u003eContributing Guidelines\u003c/summary\u003e\n\n1. **Fork the Repository**: Start by forking the project repository to your github account.\n2. **Clone Locally**: Clone the forked repository to your local machine using a git client.\n   ```sh\n   git clone https://github.com/maykbrito/fronteditorv2\n   ```\n3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name.\n   ```sh\n   git checkout -b new-feature-x\n   ```\n4. **Make Your Changes**: Develop and test your changes locally.\n5. **Commit Your Changes**: Commit with a clear message describing your updates.\n   ```sh\n   git commit -m 'Implemented new feature x.'\n   ```\n6. **Push to github**: Push the changes to your forked repository.\n   ```sh\n   git push origin new-feature-x\n   ```\n7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations.\n8. **Review**: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!\n\u003c/details\u003e\n\n\u003cdetails closed\u003e\n\u003csummary\u003eContributor Graph\u003c/summary\u003e\n\u003cbr\u003e\n\u003cp align=\"left\"\u003e\n   \u003ca href=\"https://github.com{/maykbrito/fronteditorv2/}graphs/contributors\"\u003e\n      \u003cimg src=\"https://contrib.rocks/image?repo=maykbrito/fronteditorv2\"\u003e\n   \u003c/a\u003e\n\u003c/p\u003e\n\u003c/details\u003e\n\n---\n\n##  Thanks\n\nYou can support this project by giving it a ⭐️ on GitHub.\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykbrito%2Ffronteditorv2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmaykbrito%2Ffronteditorv2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmaykbrito%2Ffronteditorv2/lists"}