GitHub is awesome, but did you know you can open any repository in an online editor or even live preview your code with just a small URL change? No need to clone the repo or set up a local environment—just tweak the URL and you're good to go! Let’s dive into these cool tricks. 👇
✏️ Open Any GitHub Repo in a Browser-Based VS Code Editor
Want to edit a GitHub repository instantly? Use GitHub.dev, which opens the repo in a web-based VS Code editor.
🔹 How to do it:
Just change github.com to github.dev in the URL!
Before:
https://github.com/username/repository
After:
https://github.dev/username/repository
Hit Enter, and boom! 🎉 The repo opens in an online VS Code editor, where you can browse and edit the code. Perfect for quick edits and PR reviews!
🔹 Example:
Want to open React's GitHub repo? Try this:
https://github.dev/facebook/react
👀 View Any Repo in VS Code-Style (Read-Only)
If you want to browse the code in a VS Code-style interface without editing, use github1s.com.
🔹 How to do it:
Replace github.com with github1s.com.
Before:
https://github.com/username/repository
After:
https://github1s.com/username/repository
🔹 Example:
Check out Node.js repo in VS Code style:
https://github1s.com/nodejs/node
💡 Tip: This is super handy when exploring large repositories without downloading them!
🎨 Live Preview for HTML, CSS & JavaScript Projects
Working on a front-end project and want a live preview? Just add box after github in the URL, and it opens in CodeSandbox, an online coding environment.
🔹 How to do it:
Replace github.com with githubbox.com.
Before:
https://github.com/username/repository
After:
https://githubbox.com/username/repository
🔹 Example:
Preview a TailwindCSS template live:
https://githubbox.com/tailwindtoolbox/Minimal-Blog
🚀 Now you can see and test your front-end projects instantly, without setting up a local server!
🤩 Why Use These Tricks?
✅ Save time – No need to clone repos for small edits.
✅ Fast PR reviews – Open a pull request branch instantly.
✅ Better code exploration – View large projects in a clean VS Code format.
✅ Live preview front-end projects – Test HTML, CSS, and JS without setup.
Check out this Realtime Location Tracker Project (code sandbox):
https://codesandbox.io/p/sandbox/github/mahmud-r-farhan/Realtime-Location-Tracker
Live Preview the Project:
https://realtime-location-tracker-v9ow.onrender.com/
Github repo:
https://github.com/mahmud-r-farhan/Realtime-Location-Tracker
Try them out today and level up your GitHub workflow! Know any other cool GitHub tricks? Drop them in the comments! 🚀🔥
Follow for more!
Top comments (0)