Edit JSON in LiveBook

wwaldner

I am trying to figure out a way to load a file in Livebook and then allow editing parts of the data in editor. I want the Livebook to be able to perform subsequent actions on the data. This seems such a simple use case that I can’t believe I am having such a hard time figuring this out.

The basic issue I have is getting data a file/variable into a Kino. The only way I see doing this would be to create a smartcell that would introspect the variables in the livebook, and provide a custom JS editor that would allow editing the data. This is way too much work. I would be happy to just show the data in a JSON format so it can be edited and the allow other subsequent actions on the data.

The sample Livebook tutorials has a MD that gets me so close, but falls short of what I need. The sample allows showing an editor and assigning JSON to a variable in the Livebook. This is exactly what I need to do, however, I would like a fixed variable name and populate the editor with data read from a file. I don’t see a way to get data into the JSON editor from another variable or a file.

This can be 4 different sections/frames of the Livebook

Load CSV file into variable
Parse CSV and prepare a couple chunks of JSON
Allow editing the JSON(perfer to use code editor, but could build Kino form)
Perform actions on the JSON

# Untitled notebook

```elixir
Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.13.1"}
])

Load

var1 = %{name: "fred"} |> Jason.encode!()

Editing

# I want to be able to edit the JSON in code editor
# show me the editor with 
Kino.Text.new(var1)

Actions

# OK, do some actions on var1

4 comments

/livebook #code-editors

0 476 4

2024-07-02 16:09:32 UTC

First 4 of 4 Posts

acalejos

I did something similar in Merquery.

It’s a SmartCell using a JS editor just like you said. It’s using CodeMirror, and even
has prettification for JSON using Prettier.

Check it out and maybe it’ll point you in the right direction.

It will also parse the JSON on the server side, and if it’s valid, decode it into a JSON map.

https://github.com/acalejos/merquery/blob/main/assets/src/components/Editor.vue

Post #1

jonatanklosko

Creator of Livebook

@wwaldner if I understand correctly, here is a simple version using a textarea:

# Untitled notebook

```elixir
Mix.install([
  {:jason, "~> 1.4"},
  {:kino, "~> 0.13.1"}
])
```

## Load

```elixir
var1 = %{name: "fred"} |> Jason.encode!()
```

## Editing

```elixir
input = Kino.Input.textarea("JSON", default: var1)
```

## Actions

```elixir
var2 = Kino.Input.read(input)
```

If you are motivated enough, you could build a Smart cell more tailored for your use case, and use the editor feature (that is, enable a livebook-managed editor for the smart cell). There is a guide in the Livebook Learn section titled “Automating with Smart cells” with a JSON editor, though it does something else.

In the future we may consider having code editor as another type of Kino input, but it’s not in the immediate plans.

Post #2

wwaldner

Thank you, I was able to get things working with the textarea input.

Unfortunately, I was not able to get the Smartcell approach to work. I was not able to figure out how to get a value from a livebook variable into the text of the editor. I saw the JSON editor in the guide, and it is sooo close to doing what I want, just can’t figure out how to populate it with a initial/default value.

Post #3

jonatanklosko

Creator of Livebook

Ah yeah, it is doable by implementing scan_binding for the SmartCell, but for this case it’s not ideal because we would effectively need to send the whole binding across processes, unless we assume the input variable has a fixed name. An input (the textarea) is semantically closer for the use case.

Post #4

— All posts loaded —