Experimental Viewer for STAC & JSON

[m-mohr]

What I'm changing

Adding a basic viewer for STAC & JSON

How I did it

It's based on a web-component in openeo-vue-components:
Open-EO/openeo-vue-components#114
(Despite the name, the STAC components are not openEO specific.)

How you can test it

For example here: https://source.coop/fiboa/ai4sf/stac/collection.json

This is a proof-of-concept, I'd want to deploy the viewer somewhere else if we want to proceed with this PR.
Wasn't able to test myself due to #201

[vercel]

@m-mohr is attempting to deploy a commit to the Radiant Earth Team on Vercel.

A member of the Team first needs to authorize it.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
source-cooperative	Ready	Preview, Comment	Jan 9, 2026 7:06pm

[m-mohr]

Looks like this at https://source-cooperative-git-fork-m-mohr-main-radiantearth.vercel.app/fiboa/ai4sf/stac/collection.json

[jedsundwall]

Love it. Approved. Possible to get it to match our styles? https://github.com/source-cooperative/source.coop/wiki/0001-%E2%80%90-Copy-styles-manually-from-source.coop-to-embedded-viewers

[m-mohr]

Possible to get it to match our styles? https://github.com/source-cooperative/source.coop/wiki/0001-%E2%80%90-Copy-styles-manually-from-source.coop-to-embedded-viewers

It's possible, yes.

@jedsundwall Where do I get the CSS from? The readme doesn't say it really and I can't find a central CSS in the source.coop GitHub. Can you provide me with a CSS file for the most common style declarations, please?

[m-mohr]

Some very basic styling has been applied, if more styles are required, please PR them to https://github.com/moregeo-it/stac-web-component/blob/main/index.html

Happy to move the stac-web-component over to the source-cooperative org if you want.

This is ready for review.

[jedsundwall]

This is awesome, but upon discussing, we believe the first order of business is to create a basic JSON viewer that is STAC-aware, as described in #205. @m-mohr is that something you'd be open to working on? If not, perhaps we can enlist @severo to work on it.

[m-mohr]

@jedsundwall this already includes a very basic JSON Viewer. Not sure whether it meets your requirements for a basic JSON Viewer. What are the requirements?

[jedsundwall]

Yeah, we owe you a better explanation of our requirements. We noticed that this viewer did have a simple view, but we didn't find it intuitive. @alukach what did you use to display json in the browser? Was it something built into Firefox? Do you mind sharing a screenshot?

We've created an issue to work on generic json here: #205.

[severo]

Was it something built into Firefox? Do you mind sharing a screenshot?

This is what Firefox shows when you use "Open file" with that JSON file

[jedsundwall]

@severo yeah that's what @alukach had shown us. I like the initial human-readable view with the "json" and "header" tabs.

[alukach]

This is what Firefox shows when you use "Open file" with that JSON file

Yeah, I'm using a Chrome-port of that: https://github.com/pd4d10/json-viewer. May be useful for inspiration

[alukach]

I vibe coded a solution slapping the OpenEO component onto a clone of the Firefox JSON Viewer built with React JSON Tree

Repo: https://github.com/alukach/viewer-json-eo
Demo: https://alukach.com/viewer-json-eo/?url=https://data.staging.source.coop/fiboa/ai4sf/stac/collection.json&tab=openeo

Perhaps we can do something like this? Merging VueJS and ReactJS is a bit smelly, perhaps the code should be rebuilt as a VueJS only app if we want to keep the OpenEO viewer, but that could be a future thing.

Warning

There's a bug where once you navigate away from the OpenEO tab, it loads as N/A when you return to the tab.

[jedsundwall]

Yeah something like that looks right to me!