← All posts
10 July 2026Power BIWeb dev

Embedding live Deneb visuals in blog posts

I added a way to paste a Vega / Vega-Lite spec, give it sample data, and render a chart exactly the way Deneb renders it inside Power BI — live and editable, right in a post. Here's how it works, with a demo you can poke at.

If you build Power BI visuals with Deneb, you know the pain of showing one to somebody. You either paste a screenshot — dead, un-inspectable — or you send a .pbix that nobody's going to open. The spec is just JSON and a bit of data, yet there was no good way to drop a living copy into a page and say "here, poke at it".

So I built that into the site. I can now paste a Vega or Vega-Lite spec, give it a sample dataset, and get a chart that renders exactly the way Deneb renders it inside Power BI — same named-dataset convention, same container-fit behaviour — right here in a blog post.

Here's one. Hit Edit data, change a number, and watch it redraw:

Loading visual…

That's not an image. It's the real Vega-Lite runtime, fed the same dataset that the spec references. The numbers you type live only in your browser — Reset puts my data back.

Why it renders like Power BI does

Deneb has one convention that trips people up the first time: your spec doesn't hold the data, it references a named dataset called dataset: 

{
  "data": { "name": "dataset" },
  "mark": "bar",
  "encoding": { ... }
}

Power BI injects the rows from your report under that name at render time. The embed here does the identical thing — it takes the sample rows I saved with the visual and injects them as dataset before handing the spec to vega-embed. Paste a spec straight out of your Deneb editor and it just works, no rewriting data blocks.

The other half is sizing. A Deneb visual doesn't set its own width and height — the Power BI visual container owns the box, and the spec fills it. The embed copies that: if your spec leaves width/height unset, it gets "container" with autosize: fit, so the chart fills the card and reflows when the page does. Explicitly sized specs are left alone — I never override what you asked for.

How I use it

  • Build and tune the spec in Deneb Studio on the site — live preview, fed the same sample data I'll ship with it.
  • Mark the visual public. Public visuals are world-readable through one read-only endpoint; drafts stay private (they 404, so I'm not even leaking that they exist).
  • Drop the token [[vega:ID]] into a post on its own line, where ID is the visual's number. That's the whole embed syntax.

At render the post splits on that token: everything around it is normal prose, and the token becomes a live <VegaVisual> that fetches the public spec and data and draws it.

What it's good for

The obvious win is writing about a technique and letting the reader touch the result — change the category order, push a value negative, see how the mark handles it. But the quieter win is my own future self: a saved visual is a runnable artefact, not a screenshot I have to rebuild from scratch when I want to explain it again.

If you're doing Deneb work and want the spec for the chart above, everything you need is in it — open the visual's action menu and choose View Source. Steal freely.

Comments

Loading…