Skip to content

Latest commit

 

History

History
113 lines (78 loc) · 3.31 KB

readme.md

File metadata and controls

113 lines (78 loc) · 3.31 KB

JSBook

JSBook is an interactive and versatile platform that allows developers to:

  • Store notes for personal or collaborative use.
  • Write and execute React code with live output rendering on the side.
  • Experiment with new packages and create dynamic documentation.

The project uses a monorepo setup powered by Lerna and incorporates various powerful packages and tools.

Features

1. Real-Time React Code Execution

Write React code in an editor and instantly see the output rendered on the right side. Perfect for prototyping components, testing libraries, or teaching React concepts.

2. Note Storage

Store and organize notes alongside your code. Ideal for creating detailed documentation or brainstorming ideas.

3. Interactive Documentation

Use the platform to create interactive documentation for projects, allowing others to explore and experiment with your code examples.

Technologies Used

Core Packages

  • esbuild-wasm: For super-fast bundling and code execution.
  • jscodeshift: Enables seamless code transformations and manipulation.
  • monaco-editor: Provides a robust, feature-rich code editor interface.
  • react-split: Enables resizable panes, enhancing the user interface for split-screen code and output views.
  • prettier: Ensures consistent and clean code formatting across the project.

Installation

  1. Clone the Repository

    git clone https://github.com/your-username/jsbook.git
cd jsbook

  2. Install Dependencies Use Lerna to bootstrap the packages:

    npx lerna bootstrap

  3. Start the Development Server

    npm start

Usage

Writing Notes

  • Use the left pane to create and manage your notes.

Writing and Executing React Code

  • Type your React code in the editor.
  • Watch the live output update instantly on the right side.

Resizing Panes

  • Drag the divider between the editor and output pane to adjust their sizes. This functionality is powered by react-split.

Contribution

We welcome contributions to make JSBook even better! Follow these steps to contribute:

  1. Fork the repository.
  2. Create a new branch for your feature or bugfix: 
    git checkout -b feature/your-feature-name
  3. Commit your changes: 
    git commit -m "Add your message here"
  4. Push to your branch: 
    git push origin feature/your-feature-name
  5. Create a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Acknowledgements

  • Lerna for managing the monorepo architecture.
  • esbuild for its unparalleled speed in bundling and execution.
  • monaco-editor for the excellent code editor experience.
  • react-split for seamless resizable panes.
  • Prettier for ensuring clean and readable code.

Screenshots

JSBook Editor

Example of the interactive editor and live preview.