Skip to content

Modern web-based code editor built with Next.js and Monaco Editor, featuring Clerk authentication, Convex backend, TailwindCSS UI, and smooth Framer Motion interactions.

Notifications You must be signed in to change notification settings

manandevs/code-editor

Repository files navigation

💻 CodeCraft

image

Write, Run, and Share Code Instantly in Your Browser. Meet CodeCraft, a lightweight, interactive code editor designed for rapid experimentation. Experience a distraction-free UI, instant execution, and a smooth developer experience right from your browser.

Live Demo Repo Size License


🚀 About The Project

CodeCraft is an interactive, web-based playground built for developers who need to quickly test logic, prototype ideas, or share code snippets without spinning up a local development environment.

Whether you're practicing algorithms, debugging a quick script, or collaborating with peers, CodeCraft provides a robust editor powered by Monaco (the engine behind VS Code), beautiful syntax highlighting, and a secure sandboxed runtime for instant output.

✨ Key Features


⚡ Instant Execution

Run your code and view the output in real-time. No loading screens, no complex setups—just pure coding speed.



🎨 Pro Editor Feel

Enjoy premium features like "VS Dark" theme support, font scaling, and Monaco-powered syntax highlighting.



🧩 Reusable Snippets

Save time with a built-in snippets panel giving you quick access to reusable code blocks and starter templates.


⚡ Stats & Capabilities

Metric Description
🌐 Multi-Language Easily switch between supported languages (JavaScript, Python, etc.) via the dropdown.
🔒 Sandboxed Execution Safe, isolated execution engine ensuring your browser remains secure while running dynamic code.
🔗 One-Click Share Share your code effortlessly. Generate a unique link to your exact code state instantly.
📱 Responsive UI A clean, split-pane layout that adapts beautifully to different screen sizes and workflows.

⚙️ How CodeCraft Works

Three simple steps to supercharge your prototyping workflow:

  • 01 | Write: Open CodeCraft and start typing in the main Editor Panel. Use familiar shortcuts thanks to our powerful editor engine.
  • 02 | Execute: Hit the Run Code button. Our sandboxed runtime compiles and executes your code instantly, displaying results in the Output Panel.
  • 03 | Customize: Toggle between Light and VS Dark themes, adjust your font size on the fly, and switch programming languages effortlessly.
  • 04 | Share: Click the Share button to generate a snapshot of your workspace to send to colleagues or friends.

🛠️ Tech Stack

📁 Project Structure

/components     → UI elements, Editor, and Output panels
/pages          → Application routing and layout
/styles         → Global styling and Tailwind configurations
/utils          → Helper functions, execution logic, and APIs
/public         → Static assets and icons

About

Modern web-based code editor built with Next.js and Monaco Editor, featuring Clerk authentication, Convex backend, TailwindCSS UI, and smooth Framer Motion interactions.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors