feat: WASM-based web playground for jsongrep

[micahkepe]

Is your feature request related to a problem? Please describe.

There's no way to try jg queries without installing the tool first. Users discovering jsongrep from the README or blog post have to install before they can experiment, which raises the barrier to adoption.

Describe the solution you'd like

A browser-based playground (similar to jaq's playground) where users can paste JSON (or YAML/TOML) and run jg queries interactively.

This would involve:

1. Small WASM wrapper around the lib.
2. Minimal web UI
3. GitHub Pages deployment workflow with wasm-pack (Criterion reports already hosted)

Describe alternatives you've considered

• Just linking to the install instructions → current approach, but higher friction

Additional context

• Reference implementation: jaq-play (~200 lines of HTML/JS + a small Rust WASM crate)
• The gh-pages branch currently hosts Criterion HTML reports; the playground would need a subdirectory layout or separate deployment path

[thomas9911]

I made a small POC for fun

demo: https://thomas9911.github.io/jsongrep-wasm/

repo: https://github.com/thomas9911/jsongrep-wasm

It doesnt use wasm-pack but Rust target wasm32-wasip2 and to convert to for frontend use with jco transpile

[micahkepe]

🤯 Wow this is great really appreciate this!

I'm wondering if the demo can also support TOML, JSONL, CBOR, and MessagePack like the CLI (I should probably make this part of the library so lib users don't have to do the serde transformations themselves):

jsongrep/src/main.rs

Lines 107 to 218 in 945bcff

	impl Input {
	fn to_str(&self) -> Result<&str, Utf8Error> {
	match self {
	Self::Stdin(buffer) => Ok(buffer.as_str()),
	Self::File(mmap) => str::from_utf8(mmap),
	}
	}
	fn to_bytes(&self) -> &[u8] {
	match self {
	Self::Stdin(buf) => buf.as_bytes(),
	Self::File(mmap) => mmap.as_ref(),
	}
	}
	fn to_json_string(&self, format: Format) -> Result<String> {
	match format {
	Format::Jsonl => {
	let text = self.to_str().map_err(|_| {
	anyhow::anyhow!("JSONL input is not valid UTF-8")
	})?;
	let mut buf = String::from("[");
	let mut first = true;
	for line in text.lines() {
	let line = line.trim();
	if line.is_empty() {
	continue;
	}
	if !first {
	buf.push(',');
	}
	buf.push_str(line);
	first = false;
	}
	buf.push(']');
	Ok(buf)
	}
	// YAML
	#[cfg(feature = "yaml")]
	Format::Yaml => {
	let text = self.to_str().map_err(|_| {
	anyhow::anyhow!("YAML input is not valid UTF-8")
	})?;
	let value: serde_json::Value =
	serde_yaml::from_str(text).context("parse YAML input")?;
	serde_json::to_string(&value).context("serialize YAML as JSON")
	}
	#[cfg(not(feature = "yaml"))]
	Format::Yaml => {
	anyhow::bail!(
	"YAML support not enabled. Rebuild with --features yaml"
	)
	}
	// TOML
	#[cfg(feature = "toml")]
	Format::Toml => {
	let text = self.to_str().map_err(|_| {
	anyhow::anyhow!("TOML input is not valid UTF-8")
	})?;
	let value: serde_json::Value =
	toml::from_str(text).context("parse TOML input")?;
	serde_json::to_string(&value).context("serialize TOML as JSON")
	}
	#[cfg(not(feature = "toml"))]
	Format::Toml => {
	anyhow::bail!(
	"TOML support not enabled. Rebuild with --features toml"
	)
	}
	// CBOR
	#[cfg(feature = "cbor")]
	Format::Cbor => {
	let value: serde_json::Value =
	ciborium::from_reader(self.to_bytes())
	.context("parse CBOR input")?;
	serde_json::to_string(&value).context("serialize CBOR as JSON")
	}
	#[cfg(not(feature = "cbor"))]
	Format::Cbor => {
	anyhow::bail!(
	"CBOR support not enabled. Rebuild with --features cbor"
	)
	}
	// MESSAGEPACK
	#[cfg(feature = "msgpack")]
	Format::Msgpack => {
	let value: serde_json::Value =
	rmp_serde::from_slice(self.to_bytes())
	.context("parse MessagePack input")?;
	serde_json::to_string(&value)
	.context("serialize MessagePack as JSON")
	}
	#[cfg(not(feature = "msgpack"))]
	Format::Msgpack => {
	anyhow::bail!(
	"MessagePack support not enabled. Rebuild with --features msgpack"
	)
	}
	// Unreachable, someone made an oopsie
	Format::Auto | Format::Json => {
	unreachable!(
	"to_json_string called with Auto or Json, not needed"
	)
	}
	}
	}
	}

Would be great to have parity (CBOR/MessagePack could accept file upload instead of paste)

Would be cool too to also show the query time + path outputs in the results area (I see you already have query_with_path :) https://github.com/thomas9911/jsongrep-wasm/blob/403b86e48e1a45d6f4c1d0a4daef1d747f765b58/wit/world.wit#L6)

Would you be open to contributing this directly into the main repo (e.g. a playground/ directory)? That way it stays in sync as the lib evolves and we can deploy it alongside the existing gh-pages content. Happy to help get that setup.

[thomas9911]

For the TOML it needs to own the data to deserialize it so that is why i left it out of scope. And ofcourse the binary formats cant be typed in into a text box, that is why i left that out.

Also i am not a frontend developer so, someone else needs to make it better :P

I can take a look later how I can add the timing information

[micahkepe]

Sounds good!

File uploads for the binary formats could work potentially or we just leave it exclusively for human readable formats.

I'm down to work on the frontend side if you'd like and get this super polished would love to upstream this

[thomas9911]

I encountered a small issue when adding timing information, the browser only support millisecond resolution. https://developer.mozilla.org/en-US/docs/Web/API/Performance/now

Your library is too fast for small demos 😂

[micahkepe]

Haha that's great

[thomas9911]

created pull request to add it including github actions to deploy it

NB: I used claude code for the UI and chatgpt to verify that the github action workflow was correct

[micahkepe]

Sweet will take a look later! Do you mind if I make frontend changes?

[thomas9911]

No ofcourse you can change it

[micahkepe]

Resolved in #31