Skip to content

README.md

Latest commit

 

History

History
112 lines (79 loc) · 2.09 KB

README.md

File metadata and controls

112 lines (79 loc) · 2.09 KB

tancode

A simple online code editor where you can write and run code in a few programming languages, or play around with HTML, CSS, and JavaScript with a live preview.

Features

Programming Languages

  • C
  • C++
  • C#
  • Java
  • Python
  • JavaScript (Node.js)
  • TypeScript
  • Go
  • Rust
  • Elixir

HTML/CSS Playground

  • Edit HTML, CSS, and JavaScript in separate tabs
  • See the result in a side-by-side preview

Editor Settings

  • Syntax highlighting
  • Multiple color themes
  • Adjustable font size and font family
  • Toggle line numbers, code wrapping, and minimap
  • Vim mode support
  • Input and output panels for programs

Tech Stack

  • TanStack Start
  • TypeScript
  • Tailwind CSS
  • Shadcn/ui
  • Monaco Editor (@monaco-editor/react)
  • Shiki (syntax highlighting)
  • Zustand (state management)

Installation

Prerequisites

  • Node
  • Git

Setup

  1. Clone the repository:

    git clone https://github.com/ankitk26/tancode.git
cd tancode

  2. Install dependencies:

    npm install
# or
bun install

  3. Create a .env.local file:

    cp .env .env.local

    Add your JDOODLE API credentials:

    JDOODLE_CLIENT_ID=your_client_id
JDOODLE_CLIENT_SECRET=your_client_secret

    Get your free API credentials at jdoodle

  4. Run the development server:

    npm run dev
# or
bun run dev

  5. Open your browser and navigate to http://localhost:3000

Usage

Programming Mode

  1. Select a language from the dropdown (C, C++, C#, Java, Python, JavaScript, TypeScript, Go, Rust, or Elixir)
  2. Write your code in the editor
  3. Enter input if your program needs it
  4. Click "Run" to execute
  5. View the output

HTML/CSS Playground

  1. Select "Web Development" from the language dropdown
  2. Edit HTML, CSS, and JavaScript in their respective tabs
  3. See the result in the preview panel

Support