Skip to content

feat(playground): add share data url button#1266

Open
LeoMcA wants to merge 2 commits intomainfrom
playground-copy-data-uri
Open

feat(playground): add share data url button#1266
LeoMcA wants to merge 2 commits intomainfrom
playground-copy-data-uri

Conversation

@LeoMcA
Copy link
Member

@LeoMcA LeoMcA commented Jan 30, 2026

@caugner as we briefly discussed in our 1:1

since working on devtools, I've noticed it's quite a common/nice pattern to share testcases (on slack, bugzilla, etc.) with data:text/html urls. authoring them is a bit of pain though: I asked the team if there was any better way than manually typing into the url bar... and they told me that's what they were all doing!

I've added in the simplest possible way for now: obviously references to static assets are going to break, we could remove non-syntactic line breaks to make the urls a bit shorter/prettier, etc. but we can make those improvements if the metrics show any usage/we get direct feedback about it.

I did make the effort to only urlencode non-space whitespace as otherwise the urls are very un-readable, and what's nice about the practice is you can read what the page you're about to load is before pasting it in. Firefox/Chromium/Epiphany seem to handle unencoded utf8 characters just fine when pasted in (I'll check in Safari once my mac is charged).

For an example where newlines are important:

hello
world
❤️
body {
  white-space: pre;
}
console.log(`hello
world!`);

The generated url is readable, and functional!

data:text/html;charset=utf-8,<!doctype html><style>body {%0A white-space: pre;%0A}%0A</style>hello%0Aworld%0A❤️<script>console.log(`hello%0Aworld!`);%0A</script>

@LeoMcA LeoMcA requested review from a team and caugner January 30, 2026 16:18
@github-actions
Copy link
Contributor

dd47e77 was deployed to: https://fred-pr1266.review.mdn.allizom.net/

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant