CodePencil - Edit and Run Code Online

A code editor built with ReactJS that uses CodeMirror for UI and themes and looks like a CodePen clone.

Preview

Check out the live version of the Code Editor here: CodePencil - Live

Tools

The CodePencil project is built using the following tools:

ReactJS: A JavaScript library for building user interfaces.
Functional Components: A type of component in React that doesn't have state or lifecycle methods.
useState: A hook in React that allows functional components to use state.
useEffect: A hook in React that allows functional components to use lifecycle methods.
Custom Hooks: Reusable hooks that can be shared between components.
JSX: A syntax extension for JavaScript that allows HTML-like syntax.
CSS: A stylesheet language used for styling HTML documents.
localStorage Browser API: A web API used to store key-value pairs locally in the browser.
CodeMirror Package: An open-source text editor package used for the editor's UI and themes.

Resources & References

How to Run?

To run this project on your system, run the following commands in your terminal:

  npm install
  npm start

To create a build of this project, run

  npm run build

Features

The CodePencil project has the following features:

Syntax highlighting for different programming languages, including HTML, CSS, JavaScript, and more.
Real-time preview of the code snippets being edited.
Ability to choose from different themes for the editor's interface.
Auto-indentation and line numbers for code snippets.
Ability to save and load code snippets locally using the browser's localStorage API.
Custom hooks to handle the editor's state and localStorage API calls.

Usage

To use the CodePencil project, follow these steps:

Open the editor in the browser by navigating to http://localhost:3000.
Write or paste your code snippet into the editor.
Choose a theme for the editor's interface.
Preview the code snippet in real-time by clicking the "Run" button.
Save the code snippet locally by clicking the "Save" button and entering a name for the snippet.
Load a saved code snippet by clicking the "Load" button and selecting a saved snippet from the dropdown list.

Conclusion

The CodePencil project is a simple but powerful online code editor built with ReactJS and CodeMirror. It supports different programming languages, syntax highlighting, themes, and real-time preview of code snippets. It also allows users to save and load their code snippets locally in the browser using the localStorage API. The project can be further improved by adding more programming languages and custom themes, as well as integrating with cloud storage services like Google Drive or Dropbox.