I've been building a little web app that would help you edit URLs more seamlessly. It gives you a breakdown of a URL so you could easily manipulate it. Here's the MVP version.

Check it out at burl.bar

It's still an MVP at this point. I'm putting it out there now so I get feedback as I'm building it. Gonna spend the next couple of weeks prettying it up and putting in more features.

Why Did I Make This?

Reason One: Managing Permalinks

Some time ago I had to work with Grafana dashboards. I needed to work with permalinks to the dashboards that would encode a specific dashboard state. I needed to edit parts of the dashboard state like the time range using the "from" and "to" query parameters, and the dashboard refresh rate using the "refresh" parameter. A typical permalink would hence look something like this:

http://mydashboard.com/dashboard/service-metrics?orgId=101&from=now-6h&to=now&refresh=30s

It's possible to manually edit this if you need to, but if there are many more URLs and more query parameters involved, it gets tedious.

Reason Two: Cleaning Up URLs

When you share a post from social media by obtaining a link to that post, the link will typically include utm_* query parameters so that the site could keep track of traffic to that post. I wanted an easy way to get rid of these parameters. Here's the URL used in the MVP screenshot above:

https://www.reddit.com/r/aww/comments/mtv5a3/this_german_shepherd_is_well_known_in_her/?utm_source=share&utm_medium=web2x&context=3

I thought it would be really nice if I could just click a couple of buttons to get rid of them.

So I decided to build a tool that would fulfil both the use cases above and any new use cases one could come up with!

Updates

I'll be posting updates once or twice a week on my Twitter so you can follow me there for updates. I've posted two so far and I'm hoping for some good progress ahead.

The repository is public. I'm open to any PRs, although I haven't been able to afford time to flesh out a contribution guide. But any kind of PRs/issues are welcome!

cd burl
yarn install

yarn dev

yarn cypress:open

yarn cypress:run

Plans

Pretty UI

I'm thinking of quickly patching up the UI using a React component library like Ant Design or React Bootstrap. Then later we could go completely custom by using our own CSS. For CSS in a React app, I think a CSS-in-JS solution provides a good dev experience. So I'm thinking styled-components.

Shareability

I want the app state to be shareable. If two people have to manipulate URLs for some reason, and they wanna share a broken-down view of a URL to one another, it should be as easy as sharing a link. So if you wanna share the broken-down Reddit post link to someone, you just prepend burl.bar?u= to it and you're good to go:

This isn't implemented, so the following URL won't work yet.
Update: It works now!

burl.bar?u=https://www.reddit.com/r/aww/comments/mtv5a3/this_german_shepherd_is_well_known_in_her/?utm_source=share&utm_medium=web2x&context=3

Many URL Formats

For now, the app supports only http and https URLs. I'm imagining it would later support other URL protocols as well, such as ssh, ftp, etc. The URL breakdown input fields would be based on the protocol of the URL input.

This tool has already come in handy to me since building the basic version. It might help you out someday too! Thanks for reading.