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)