FRONTEDITOR.DEV

tsconfig.node.json	- Enables TypeScript configuration for Node.js environment in the project - Supports ESNext module format and Node module resolution - Defines base URL and path aliases for cleaner imports - Includes Vite configuration file for build setup.
package.json	- Facilitates project build, development, and linting tasks - Manages dependencies and scripts for Vite, TypeScript, ESLint, and TailwindCSS - Enables seamless development experience and efficient codebase maintenance.
components.json	- Define project aliases and configurations for styling, TypeScript, and Tailwind CSS in the components.json file - This file sets up key project settings like component paths and global styles, enhancing code organization and maintainability within the architecture.
vercel.json	Redirects all incoming requests to the root path, ensuring a consistent entry point for the project.
biome.json	- Defines configuration settings for code formatting, linting, and file organization - Specifies rules for JavaScript formatting, linter configurations, and file overrides - Organizes imports, sets formatting styles, and enables/disables specific linting rules - Includes overrides for specific file paths.
tsconfig.json	- Defines TypeScript compiler settings for the project, targeting ESNext with strict type checking and module resolution for Node - Maps aliases for paths in the source code directory - Integrates with React JSX syntax and references a separate tsconfig file for Node-specific settings.
postcss.config.js	- Configures PostCSS plugins Tailwind CSS and Autoprefixer for the project's build process, ensuring consistent styling and browser compatibility - This file plays a crucial role in defining the CSS processing pipeline within the project architecture.
tailwind.config.js	- Enhances Tailwind CSS configuration by enabling JIT mode, dark mode support, and customizing grid columns, border radius, and colors - Includes the Tailwind CSS Animate plugin for additional functionality - The file specifies the content paths for stylesheets, contributing to a more efficient and tailored styling setup within the project architecture.
index.html	- The index.html file serves as the entry point for the front-end editor, defining the structure and initial content of the web page - It includes essential metadata, links to external resources, and references the main TypeScript file for the application logic - This file sets the foundation for the user interface and functionality of the editor within the project architecture.
vite.config.ts	Configures Vite to use React and sets up an alias for the project's source directory.

vite-env.d.ts	- Defines Vite client types for the project, ensuring seamless integration with Vite's development server - This declaration in vite-env.d.ts enhances the codebase architecture by providing necessary type references for Vite's client-side functionality.
main.tsx	- Renders the React application by creating a root element and rendering the main App component within a StrictMode wrapper - This file serves as the entry point for the React application, initializing the rendering process and setting up the initial UI structure.
App.tsx	- Enables content editing within a structured context by providing an editor component wrapped in a content context provider - This setup ensures seamless management and interaction with the editor content throughout the application.

lib

utils.ts

Enhances class value handling by merging and combining CSS classes efficiently.

components

CustomEditor.tsx

- Defines a responsive code editor component that integrates Monaco Editor for HTML, CSS, JavaScript, or Markdown - Handles editor initialization, content changes, and display options based on URL parameters and user interactions - Utilizes context for state management and storage for persistent data - Supports dynamic line number visibility and customizable theming.

Preview

preview-iframe.tsx	- The `PreviewIframe` function renders an iframe element to display a preview of content specified by the `src` prop - This component plays a crucial role in the project's architecture by enabling the seamless integration of external content within the application's interface.
index.tsx	- Generates a live preview of HTML, CSS, and JavaScript code input by the user - Utilizes React hooks to manage state and trigger updates - Supports live reload functionality and displays the preview in an iframe - Handles page title and icon extraction for a more interactive user experience.
Header.tsx	- The Header component renders a customizable window title with an optional icon and a live reload toggle switch - It allows users to enable or disable automatic page reloading - The component's design and functionality enhance the user experience by providing visual cues and interactive controls for managing live reload settings.

ui

button.tsx	- Defines a Button component with customizable variants and sizes for UI consistency - Integrates with React and Radix UI, offering flexibility in styling and functionality - Promotes reusability and maintainability across the codebase architecture.
resizable.tsx	Defines resizable panel components for flexible UI layout management within the project architecture.
switch.tsx	- Defines a custom Switch component using React and Radix UI - The component handles styling and behavior for a toggle switch element - It enhances accessibility and user interaction by providing a visually appealing and functional switch interface - This component encapsulates switch functionality for seamless integration within the project's UI components.
dropdown-menu.tsx	- Facilitates creation of customizable dropdown menus with various interactive elements like items, checkboxes, and radio buttons - Enables easy integration of dropdown functionality into React applications, enhancing user experience and interface flexibility within the project's UI components.

DropdownMenu

download-zip.tsx	- Generates a downloadable zip file containing HTML, CSS, JavaScript, and Markdown files from the editor content - Parses HTML, adds scripts, and creates a zip file with the content - Enables users to download the zip file with the frontend editor content.
index.tsx	- Implements a dropdown menu component for user interactions, featuring options like downloading files and accessing account settings - The component enhances user experience by providing a visually appealing and functional menu interface within the project's architecture.

MEditor

TabButton.tsx	- Defines a reusable TabButton component for selecting different tabs within the editor interface - It handles tab selection based on user interaction and updates the visual styling to indicate the currently selected tab - This component enhances the user experience by providing a clear and intuitive way to navigate between different content tabs in the editor.
index.tsx	- Enables dynamic rendering of a multi-tab editor interface with optional preview mode - Handles tab selection, editor-only view, and resizable panel layout based on URL parameters - Supports customization through tab configuration and displays a logo with external link - Integrates with external components for enhanced functionality.

contexts

EditorContentContext.tsx

- Manages the state and functionality of the editor, including loading grammars, handling value changes, and defining editor themes - Integrates with Monaco Editor and emmet-monaco-es for a seamless editing experience - Handles key commands for saving and initializes editor settings upon mount.

styles

global.css

- Define global styles and configurations for the project, including Tailwind CSS utilities and base styles - Set root variables and apply base styles to the body element.

utils

monaco-tm-registry.ts	- Defines a registry for Monaco TextMate grammars, enabling syntax highlighting for JavaScript, CSS, HTML, and Markdown files within the codebase - The registry fetches and provides grammar definitions based on the file's scope, enhancing the editor's language support.
base-64-encode-unicode.ts	Encode Unicode strings to base64 for secure data transmission in the project architecture.
Gist.ts	- 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 - This code facilitates the retrieval of HTML, CSS, JavaScript, and Markdown content for a gist based on the URL path.
Storage.ts	- Manages and stores content for the front-end editor in local storage - Handles adding, retrieving, and removing content based on the current URL path - The file defines initial state structure and functions for interacting with the stored data.
FormatCodeToIframe.ts	- FormatCodeToIframe.ts in src/utils/ serves to transform code snippets into iframe-ready formats - It structures the input code into HTML, CSS, and JavaScript segments for seamless embedding into iframes within the project architecture.

hooks

useToggle.ts

- Enables toggling functionality with customizable initial state and onChange callback - Maintains the current state and triggers the callback when toggled - Enhances reusability and flexibility in managing toggle states across components.