Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/maykbrito/fronteditorv2
A very fast front end editor
https://github.com/maykbrito/fronteditorv2
frontend javascript monaco-editor react typescript
Last synced: 2 days ago
JSON representation
A very fast front end editor
- Host: GitHub
- URL: https://github.com/maykbrito/fronteditorv2
- Owner: maykbrito
- Created: 2021-04-29T15:44:05.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-10-30T10:07:36.000Z (15 days ago)
- Last Synced: 2024-10-30T10:30:47.422Z (15 days ago)
- Topics: frontend, javascript, monaco-editor, react, typescript
- Language: TypeScript
- Homepage: https://fronteditor.dev
- Size: 604 KB
- Stars: 355
- Watchers: 7
- Forks: 44
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
FRONTEDITOR.DEV
Empower creativity with seamless code editing!
---
## Preview Demo
https://github.com/user-attachments/assets/b3e3d6bb-7429-4e55-9fb9-3b002a11e0a3
---
## Table of Contents
- [ Overview](#-overview)
- [ Features](#-features)
- [ Tecnologies](#-technologies)
- [ Project Structure](#-project-structure)
- [ Project Index](#-project-index)
- [ Getting Started](#-getting-started)
- [ Prerequisites](#-prerequisites)
- [ Installation](#-installation)
- [ Usage](#-usage)
- [ Project Roadmap](#-project-roadmap)
- [ Contributing](#-contributing)
- [ Thanks](#-thanks)
---
## 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](#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
```sh
└── 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:**
1. Clone the fronteditorv2 repository:
```sh
❯ git clone https://github.com/maykbrito/fronteditorv2
```
2. Navigate to the project directory:
```sh
❯ cd fronteditorv2
```
3. Install the project dependencies:
**Using `npm`** [
](https://www.npmjs.com/)
```sh
❯ npm install
```
**Using `yarn`** [![]()
]()
```sh
❯ yarn install
```
### Usage
Run fronteditorv2 using the following command:
**Using `npm`** [](https://www.npmjs.com/)
```sh
❯ npm run dev
```
**Using `yarn`** [![]()
]()
```sh
❯ yarn dev
```
---
## Project Roadmap
- [ ] **`User Account`**: Add user account.
- [ ] **`Copilot`**: Use IA to act as copilot.
---
## Contributing
- **🐛 [Report Issues](https://github.com/maykbrito/fronteditorv2/issues)**: Submit bugs found or log feature requests for the `fronteditorv2` project.
Contributing Guidelines
1. **Fork the Repository**: Start by forking the project repository to your github account.
2. **Clone Locally**: Clone the forked repository to your local machine using a git client.
```sh
git clone https://github.com/maykbrito/fronteditorv2
```
3. **Create a New Branch**: Always work on a new branch, giving it a descriptive name.
```sh
git checkout -b new-feature-x
```
4. **Make Your Changes**: Develop and test your changes locally.
5. **Commit Your Changes**: Commit with a clear message describing your updates.
```sh
git commit -m 'Implemented new feature x.'
```
6. **Push to github**: Push the changes to your forked repository.
```sh
git push origin new-feature-x
```
7. **Submit a Pull Request**: Create a PR against the original project repository. Clearly describe the changes and their motivations.
8. **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.
---