FRONTEDITOR.DEV

Empower creativity with seamless code editing!

Preview Demo

Screen.Recording.2024-10-30.at.07.10.08-2X-nosound.mp4

Overview

Fronteditor 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.

Features

Code Editing: Effortlessly edit and preview HTML, CSS, and JavaScript code.
Live Preview: Witness real-time updates as you code.
Customization: Tailor the editor to your preferences using those url params.
User-Friendly: Intuitive interface for a seamless experience.
Unlimited Projects: You can use pathname /anything to start a new empty project

URL Params

hideTabs: html | css | javascript | markdown
logo: false
previewOnly: true
vertical: true
editorOnly: true
reverse: true
theme: vs | vs-dark
lineNumbers: on | off

Tecnologies

Programming Language: TypeScript
Package Manager: Npm, Yarn
UI Framework: React
Styling: Tailwind CSS, Shadcn-ui
Code Editor: Monaco Editor

Project Structure

└── fronteditorv2/
    ├── README.md
    ├── biome.json
    ├── components.json
    ├── index.html
    ├── package.json
    ├── postcss.config.js
    ├── src
    │   ├── App.tsx
    │   ├── assets
    │   ├── components
    │   ├── contexts
    │   ├── hooks
    │   ├── lib
    │   ├── main.tsx
    │   ├── styles
    │   ├── utils
    │   └── vite-env.d.ts
    ├── tailwind.config.js
    ├── tsconfig.json
    ├── tsconfig.node.json
    ├── vercel.json
    ├── vite.config.ts
    └── yarn.lock

Project Index

FRONTEDITORV2/

__root__

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.

src

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.

Getting Started

Prerequisites

Before getting started with fronteditorv2, ensure your runtime environment meets the following requirements:

Programming Language: TypeScript
Package Manager: Npm, Yarn

Installation

Install fronteditorv2 using one of the following methods:

Build from source:

Clone the fronteditorv2 repository:

❯ git clone https://github.com/maykbrito/fronteditorv2

Navigate to the project directory:

❯ cd fronteditorv2

Install the project dependencies:

Using npm

❯ npm install

Using yarn

❯ yarn install

Usage

Run fronteditorv2 using the following command: Using npm

❯ npm run dev

Using yarn

❯ yarn dev

Project Roadmap

User Account: Add user account.
Copilot: Use IA to act as copilot.

Contributing

🐛 Report Issues: Submit bugs found or log feature requests for the fronteditorv2 project.

Contributing Guidelines

Fork the Repository: Start by forking the project repository to your github account.
Clone Locally: Clone the forked repository to your local machine using a git client.
```
git clone https://github.com/maykbrito/fronteditorv2
```
Create a New Branch: Always work on a new branch, giving it a descriptive name.
```
git checkout -b new-feature-x
```
Make Your Changes: Develop and test your changes locally.
Commit Your Changes: Commit with a clear message describing your updates.
```
git commit -m 'Implemented new feature x.'
```
Push to github: Push the changes to your forked repository.
```
git push origin new-feature-x
```
Submit a Pull Request: Create a PR against the original project repository. Clearly describe the changes and their motivations.
Review: Once your PR is reviewed and approved, it will be merged into the main branch. Congratulations on your contribution!

Contributor Graph

Thanks

You can support this project by giving it a ⭐️ on GitHub.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

README.md

README.md

FRONTEDITOR.DEV

Preview Demo

Table of Contents

Overview

Features

URL Params

Tecnologies

Project Structure

Project Index

Getting Started

Prerequisites

Installation

Usage

Project Roadmap

Contributing

Thanks

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.

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.

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.

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.

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.

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.

Files

README.md

Latest commit

History

README.md

File metadata and controls

FRONTEDITOR.DEV

Preview Demo

Table of Contents

Overview

Features

URL Params

Tecnologies

Project Structure

Project Index

Getting Started

Prerequisites

Installation

Usage

Project Roadmap

Contributing

Thanks