Livebook: view rich outputs + markdown, but no code?

[christhekeele]

I’ve been using Livebook for a while, mostly for personal scripting and library documentation. Recently, personal playbooks I’ve written for work to automate some devops and dataops duties have been getting adopted by other engineers, which is great! (Can’t wait for Livebook Teams!)

I’m interested in using Livebook to deploy some internal tools, where the internal user of the Livebook is business-domain savvy, but not technically savvy.

I can’t quite figure out to get what I want: essentially, rich outputs, sections, and markdown showing; but not code.

1. The Livebook view options seem to assume you are a code-focused developer:

   • Code Zen mode hides markdown and sections
   • Presentation mode blurs non-focused content but shows everything
   • Custom mode has no toggle to hide code blocks, or simple outputs

2. Conversely, Apps options seem to assume you do not need any documentation:

   • Code blocks are never shown (though you can enable browsing the full source of the App)
   • You can configure it to only render rich outputs (hiding “simple outputs” from code blocks)
   • But markdown is never shown

Effectively, Livebook seems to assume that what you are documenting with your markdown is using the code, not using the Kinos.

In my ideal world, Apps would have a setting that enables this sort of playbook mode, where developers can collaborate on the code and document it via normal comments, but write markdown and deploy apps targeting users who need some rich-text instruction. But I’d also take Custom view toggles to hide “simple output” and code blocks!

The closest I can come right now is rendering custom Kino.Markdown for things I want App consumers to see, so that it counts as a “rich output”, but the documentation editing interface of native markdown blocks is much better than the raw Elixir strings I have to compose this way.

(Additionally, it removes my ability to segment my document into navigable h2 headers to jump to specific utilities of forked execution, since only native sections are available in the Outline. But the Outline isn’t visible in Apps, anyways.)

Does anyone know of a way to get this out of Livebook?

[zachallaun]

Exactly what you’re looking for is supported using Livebook apps

When you’re on a notebook, go to the apps sidebar tab, and then “configure”.

I’ve been using apps (and the beta Livebook Teams) for internal tools and loving it.

[christhekeele]

Maybe this is a bug in my current (latest) version of Livebook, then?

@christhekeele

Conversely, Apps options seem to assume you do not need any documentation:

• Code blocks are never shown (though you can enable browsing the full source of the App)
• You can configure it to only render rich outputs (hiding “simple outputs” from code blocks)
• But markdown is never shown

Currently when I do what you’ve reccommended, all I get is the Kinos, but none of the original surrounding markdown…

Screenshots of a test playbook:

the Livebook

App settings

the App with missing markdown

Perhaps I’m doing something wrong?

@christhekeele

The closest I can come right now is rendering custom Kino.Markdown for things I want App consumers to see, so that it counts as a “rich output”, but the documentation editing interface of native markdown blocks is much better than the raw Elixir strings I have to compose this way.

This works as a replacement, but not well.

[zachallaun]

Apologies for missing that! You’re right.

Perhaps the LB team would be open to the checkbox becoming a select/radio of “all output,” “markdown cells and rich outputs”, and “only rich outputs”.

[christhekeele]

I was en route to making a feature request, but figured I’d poll the community first in case I’m missing something! Will follow up if not, though.

[josevalim]

@christhekeele

The closest I can come right now is rendering custom Kino.Markdown for things I want App consumers to see, so that it counts as a “rich output”, but the documentation editing interface of native markdown blocks is much better than the raw Elixir strings I have to compose this way.

Kino.Markdown is what I would personally do. I wonder if we can improve this in the following ways:

1. We introduce ~m and ~M sigils to Kino.Shorts, which is basically a call to Kino.Markdown.new

2. We teach Elixir’s grammar for CodeMirror that everything inside ~m/~M is Markdown

Would that deliver the experience you are asking for?

[christhekeele]

I think my preference would still be for Apps to look exactly as they do today, after checking new configuration options to hide sections and markdown (similar to the existing Custom View options).

This would also open up the opportunity (also probably togglable) to have Apps have the same h2 Outline for navigation.

Second to that, however, richer support for a ~M-type short would suffice!

[derek-zhou]

On top of that, can Livebook build the app into a standalone release, so I can deploy just the app, not the Livebook to somewhere else? I could use Livebook as an Elixir IDE for quick application development.

[hugobarauna]

@derek-zhou

On top of that, can Livebook build the app into a standalone release

Yes, you can. You could for example using the “manual docker deployment” option:

That will help you generate a Docker image containing your Livebook app, which you can run anywhere that supports Docker containers.

There’s also the option to deploy with Livebook Teams. Once set up, you can deploy your Livebook app with a click of a button.

It’s also worth mentioning that to run a Livebook app, you need a Livebook instance (which works like an “application server” for Livebook apps). But when generating the Docker image with manual deployment, for example, that’s taken care of for you.

[christhekeele]

@josevalim

Kino.Markdown is what I would personally do. I wonder if we can improve this in the following ways:

1. We introduce ~m and ~M sigils to Kino.Shorts, which is basically a call to Kino.Markdown.new
2. We teach Elixir’s grammar for CodeMirror that everything inside ~m/~M is Markdown

Would that deliver the experience you are asking for?

Poking around Livebook source, I can see why rendering Markdown blocks into Apps is nontrivial; it’s very much predicated around the notion of only rendering cells with :outputs, and Livebook.Notebook.Cell.Markdown cells render as HTML via a completely different mechanism; whereas Kino.Markdown has no problem with this.

Really what I want could be done achieved with a simple custom view option, like in this branch, to hide the code editor itself. My use-case isn’t hiding code from an untrusted operator, like in an App; it’s streamlining the viewing experience for a trusted operator to at least temporarily focus more on the prose, interactivity, and outputs; and less on the source code. It’s the opposite of Code Zen, I guess: letting a playbook operator take a well-developed tool, hide the implementation, and focus on the instructions and interface to accomplish something in anger.

For example, from that branch:

---

Code blocks on:

---

Hide code blocks:

---

Code blocks off:

---

Chopping out the code editor from the existing styling like this looks a litlte rough but it really covers all that I’m looking for. We’d need to come up with a better UX for invoking the hidden code—perhaps as simple as removing the hover-sensitivity of the |> Evaluate element in this mode, maybe making it larger and more button-like, and dealing with the hover options overlapping the evaluation status. For bells and whistles, when in no-code view, we could allow any given code block to be temporarily displayed via a new toggle in the hover menu.

[josevalim]

Yup, I’m 100% happy to support new view options. You should send a PR so we get feedback from the rest of the team!

[christhekeele]

@josevalim

You should send a PR

Sent, for those interested in following further discussion!