https://github.com/mirayatech/ninjapen

👾 An CodePen clone built with React and TypeScript.
https://github.com/mirayatech/ninjapen

code codeeditor codemirror codepen css react typescript vite

Last synced: about 6 hours ago
JSON representation

👾 An CodePen clone built with React and TypeScript.

• Host: GitHub
• URL: https://github.com/mirayatech/ninjapen
• Owner: mirayatech
• Created: 2024-01-13T12:34:04.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-14T11:20:10.000Z (10 months ago)
• Last Synced: 2024-01-15T01:49:06.987Z (10 months ago)
• Topics: code, codeeditor, codemirror, codepen, css, react, typescript, vite
• Language: TypeScript
• Homepage: https://ninja-pen.vercel.app
• Size: 218 KB
• Stars: 13
• Watchers: 1
• Forks: 2
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 🖊️ NinjaPen - CodePen Clone

NinjaPen is my own version of CodePen, built for coders who want a straightforward and efficient way to write and test HTML, CSS, and JavaScript. Using React and TypeScript, I made sure NinjaPen is easy to use and gets the job done. The app is not responsive. 

## 🚀 Key Features

- **Live Preview**: See your code changes in real time.

- **Custom Editors**: Separate editors for HTML, CSS, and JavaScript with clear syntax and numbering.

- **Auto-Save**: Your code is saved in local storage, so you won't lose your work.

- **Flexible Layout**: Easily expand or collapse code sections as you work.

## 📦 Built With

- `CSS`

- `React.js`

- `TypeScript`

- `CodeMirror`

## 💡 Improvement

- **More Languages**: Support more coding languages and frameworks.

- **Themes**: Let users pick their own color themes, including dark mode.

- **Collaborate**: Add a way for multiple people to work on the same code.

- **More Editor Tools**: Add features like auto-complete and error checking.

## 🎬 Video

https://github.com/mirayatech/NinjaPen/assets/71933266/bcad854b-e694-4a34-8003-c3ed5e67287e