Git Playground
Practice git commands safely and watch the commit graph change
A pretend git repository in your browser: run real git commands, edit files, and see commits, branches and HEAD move on a live graph. Includes guided challenges.
- git
- playground
- practice
- branch
- merge
- rebase
- commit graph
- learn
How to use Git Playground
- Pick a Challenge (8 guided exercises) or Free play for an empty folder.
- Type git commands in the terminal and press Enter, or click a common command under it. ↑ and ↓ bring back earlier commands; type help to see every supported command.
- Create and edit files with
echo "text" > file.txt, or with Edit, Save file and Create in the Files panel. Stage runsgit addfor you. - Watch the Commit graph: each dot is a commit, the ringed dot is HEAD, and labels show branches, tags and origin/* branches. Click a dot to see its message and files.
- Stuck? Use Show a hint or Show solution. Start over resets the current challenge or free play.
How it works
The repository is a small model of git written for this page. Commits are full snapshots of the files, branches and tags are labels that point at commits, and the staging area is the snapshot the next commit will save, just like real git. Each command you type is parsed and applied to that model, and the graph redraws from it.
Supported: init, status, add, rm, commit (-m, -a, --amend), log, diff, show, branch, switch, checkout, restore, merge (fast-forward, merge commits and conflicts with --abort), rebase, reset (--soft, --mixed, --hard), revert, cherry-pick, stash, tag, and a pretend remote with remote add, push, pull and fetch. References such as HEAD~1, main^, tags, origin/main and short commit ids work.
Git refuses the same things here as it does for real: switching branches when it would overwrite your changes, deleting an unmerged branch with -d, committing files that still have conflict markers, or pushing when the remote has commits you lack. If a command fails, nothing changes.
Limits
- It is a simulation, not real git: there is no real
.gitfolder, network or config, andcloneis not available. - Merges compare whole files. Two branches changing different lines of the same file still conflict here, where real git would merge them.
- A
rebase,revert,cherry-pickorstash popthat would conflict is cancelled with an explanation instead of stopping halfway. Onlymergelets you resolve conflicts by hand. - Interactive commands (
rebase -i,add -p) and commit editors are not supported; give messages with-m. - The pretend remote only changes when you push to it, so
fetchandpullnever bring in other people's work. - Up to 50 files of 20,000 characters each. The repository resets when you reload the page.
Privacy
Everything runs in this page and nothing is sent anywhere, including when you "push". Only the list of challenges you have solved is saved in this browser.
Frequently asked questions
Can I break anything by experimenting here?
No. The repository only exists in this page. Start over or a reload gives you a fresh one, so try reset --hard, force pushes and deleting branches freely.
What is the difference between staged and committed?
Staging (git add) chooses which changes go into the next commit. Committing (git commit) saves those staged changes as a permanent snapshot. The Files panel shows each file as new, changed, staged or committed.
Should I use merge or rebase?
Merge keeps history exactly as it happened and adds a merge commit. Rebase copies your commits on top of the other branch for a straight line, but gives them new ids, so don't rebase commits other people already have. Try both in the challenges and compare the graphs.
How do I undo a commit?
If you haven't pushed it, git reset --soft HEAD~1 undoes the commit and keeps the changes staged. If it is already pushed, use git revert <commit>, which adds a new commit that undoes it without rewriting history.
Why does a commit get a new id after rebase or cherry-pick?
A commit id depends on its parent. Placing the same change on a different parent makes a new commit, so the id changes and the old commit remains where it was.
More tools
- Clean Image: Inspect and remove hidden image metadata
- JWT Decoder: Decode and verify JSON Web Tokens
- Diff Checker: Compare two texts line by line
- JS Runner: Run JavaScript and TypeScript in your browser
- JSON Formatter: Format, validate and minify JSON
- Encode / Decode: Base64, URL, HTML entity and hex
- Hash Generator: MD5, SHA and HMAC of any text
- UUID Generator: Generate UUID v4 and v7 in bulk
- Timestamp Converter: Unix time ↔ human dates
- Regex Tester: Test regular expressions live
- URL Parser: Break a URL into its parts
- HTTP Status Codes: Look up any HTTP status code
- MIME Type Lookup: File extension ↔ MIME type
- Password Generator: Strong random passwords and passphrases
- Random String Generator: Random tokens, IDs and keys
- Slug Generator: Turn titles into URL slugs
- Case Converter: camelCase, snake_case, Title Case and more
- Word Counter: Count words, characters and reading time
- JSON to TypeScript: Generate TypeScript types from JSON
- JSON Diff: Compare two JSON documents structurally
- JSON to SQL: Turn JSON arrays into SQL inserts
- YAML ↔ JSON: Convert between YAML and JSON
- XML ↔ JSON: Convert between XML and JSON
- CSV ↔ JSON: Convert between CSV and JSON
- CSV Viewer: View, sort and filter CSV files
- SQL Formatter: Format and beautify SQL queries
- cURL ↔ Fetch: Convert cURL commands to fetch and back
- Markdown Editor: Write Markdown with a live preview
- Text Cleaner: Remove duplicate lines, empty lines and extra spaces
- Find & Replace: Find and replace in any text
- Cron Expression Builder: Build and explain cron schedules
- User-Agent Parser: Identify browser, OS and device from a user agent
- HTTP Headers Inspector: Paste response headers and get them explained
- JWT Generator: Create and sign test JSON Web Tokens
- Certificate Inspector: Decode PEM certificates and keys
- Meta Tag Inspector: Check a page's SEO and social tags
- UTM Builder: Build campaign URLs with UTM parameters
- URL Cleaner: Strip tracking parameters from links
- Robots.txt Generator: Create and test a robots.txt file
- Sitemap Generator: Create an XML sitemap from a list of URLs
- Image Compressor: Shrink JPEG, WebP and AVIF images in your browser
- Image Resizer: Resize images by pixels, percentage or to fit a box
- Image Converter: Convert between PNG, JPEG, WebP and AVIF
- Image to Base64: Encode images as Base64 data URIs and decode them back
- SVG Optimizer: Minify and sanitize SVG files
- Favicon Generator: Make favicon.ico, Apple and Android icons from an image or emoji
- Color Converter: HEX, RGB, HSL, OKLCH and contrast checks
- Number Base Converter: Binary, octal, decimal, hex and float bits
- IP / CIDR Calculator: Subnets, masks and IP ranges for IPv4 and IPv6
- JSONPath Query: Query JSON with JSONPath expressions
- JSON Schema Validator: Validate JSON against a schema, or generate one
- Semver Checker: Check versions against semver ranges
- chmod Calculator: Unix permissions: rwx ↔ octal
- .env Diff: Compare and validate .env files
- TOTP Generator: Generate and verify 2FA codes
- String Escaper: Escape and unescape strings for any language
- Unicode Inspector: See every character, code point and hidden symbol
- Mock Data Generator: Generate realistic fake data
- QR Code Generator: Create QR codes for links, Wi-Fi and contacts
- Lorem Ipsum Generator: Placeholder text in paragraphs, sentences or words
- Date Calculator: Date differences, business days and durations
- Unit Converter: Convert bytes, lengths, weights, temperatures and more
- Query CSV with SQL: Run SQL queries on CSV files
- PDF Merge & Split: Merge, split, reorder and rotate PDFs
- PDF Metadata Cleaner: See and remove hidden PDF metadata
- Office Metadata Cleaner: Remove author and revision data from Word, Excel and PowerPoint
- Images to PDF: Combine images into one PDF
- Image Editor: Crop, rotate, resize and adjust images
- Encrypt / Decrypt Text: Encrypt text with a passphrase (AES-GCM)
- SSH Key Generator: Generate Ed25519 and RSA SSH keys locally
- Email Header Analyzer: Trace an email's path and check SPF, DKIM and DMARC
- JSON to Code: Generate Go, Python, Rust, Java, C# and Kotlin models from JSON
- docker run ↔ Compose: Convert docker run commands to docker-compose and back
- Color Palette Extractor: Pull the dominant colours out of any image
- Password Strength Checker: How long would your password take to crack?
- SPF / DKIM / DMARC Checker: Validate and explain email DNS records
- Kubernetes YAML Checker: Validate and explain Kubernetes manifests
- .gitignore Generator: Build a .gitignore from presets
- CSP Builder: Build and check a Content-Security-Policy
- JSON-LD Generator: Create schema.org structured data
- Open Graph Image Generator: Make 1200×630 social preview images
- CSS Generator: Gradients, shadows, clamp() and more
- Time Zone Meeting Planner: Find meeting times across time zones
- HAR Viewer: Inspect browser network recordings (HAR)
- Log Viewer: Filter and search JSON log files
- TOML ↔ JSON: Convert between TOML and JSON
- HTML to Markdown: Turn HTML into clean Markdown
- Markdown Table Generator: Build and format Markdown tables
- GraphQL Formatter: Format and minify GraphQL
- Protobuf Decoder: Decode raw protobuf bytes
- Bcrypt Generator: Hash and verify bcrypt passwords
- Image Diff: Compare two images and see what changed
- Keyboard Event Viewer: See key, code, keyCode and modifiers for every keypress
- JSON Tree Viewer: Explore large JSON as a collapsible tree
- XML Formatter: Format, minify, validate and query XML
- HTML & CSS Minifier: Minify or beautify HTML and CSS safely
- Aspect Ratio Calculator: Work out sizes that keep the same ratio
- Morse Code Translator: Text ↔ Morse code, with sound
- Text to Speech: Read text aloud with your browser's voices
- Placeholder Image Generator: Make placeholder images of any size
- nginx Config Generator: Build nginx server blocks
- Duplicate File Finder: Find duplicate files by content
- Invoice Generator: Create PDF invoices in your browser
- QR Code Reader: Read QR codes from images
- Barcode Generator: Create Code 128, EAN-13, UPC-A and more
- Signature Pad: Draw a signature as a transparent PNG
- Loan / EMI Calculator: Monthly payments, interest and schedule
- Percentage Calculator: Percent of, change, discounts and tax
- Stopwatch & Timer: Stopwatch, countdown and Pomodoro
- Notepad: Quick notes saved in your browser
- Random Picker: Pick names, make teams, flip coins
- PDF to Images: Convert PDF pages to JPG or PNG
- Excel to CSV / JSON: Convert .xlsx sheets to CSV or JSON
- SIP & Compound Interest Calculator: See how investments grow over time
- Age Calculator: Exact age in years, months and days
- PostgreSQL Query Builder: Design tables and build PostgreSQL queries visually
- Git Command Builder: Build safe git commands with plain-English explanations
- Dockerfile Generator: Production-ready Dockerfiles with explanations
- Webhook Payload Builder: Build and sign test webhook payloads
- Mock API Generator: Design fake API endpoints and export fixtures, json-server or OpenAPI
- PostgreSQL EXPLAIN Visualizer: See where a PostgreSQL query plan spends its time
- OpenAPI Designer: Design OpenAPI 3.1 specs with forms and live YAML
- OpenAPI Dependency Mapper: Map which API operations use which schemas
- SQL Schema Visualizer: Turn PostgreSQL DDL into an ER diagram
- Architecture Diagram Builder: Draw system architecture diagrams and export Mermaid
- Code Complexity Analyzer: Find the most complex functions in JavaScript and TypeScript
- TypeScript Type Explorer: Explore TypeScript types with the real compiler