Code execution

The exec directive allows executing code directly in the browser.

create table countries (
  country text not null,
  country_code text not null,
  dial_code text not null,
  capital text not null,
  population int not null,
  food text
);
insert into countries values
  ('Switzerland', 'CH', '+41', 'Bern', 8776000, 'fondue!'),
  ('France', 'FR', '+33', 'Paris', 67970000, null),
  ('Germany', 'DE', '+49', 'Berlin', 83800000, null),
  ('Italy', 'IT', '+39', 'Rome', 58940000, null),
  ('Austria', 'AT', '+43', 'Vienna', 9042000, 'Kaiserschmarrn'),
  ('Lichtenstein', 'LI', '+423', 'Vaduz', 39327, null);

Directive

.. exec:: language (html | python | sql)

This directive is a code-block that allows executing the code directly in the browser. It supports most of the options of code-block, and a few more described below.

Options

:after: name [name...]

Execute one or more exec blocks before this block, in the same environment.

:editor: [ID]

Display the exec block in an editor. If ID is provided, the content of the editor is saved in browser local storage and restored on reload. ID must be unique across all documents, e.g. a UUID.

:include: path [path...] (relative paths)

Prepend the content of one or more files to the block's content.

:output-style: property: value; [property: value; ...]

CSS styles to apply to the output generated by the code block, e.g. max-height: 10rem. To which element the styles are applied is language-specific.

:style: property: value; [property: value; ...]

CSS styles to apply to the code block and editor, e.g. max-height: 20rem.

:then: name [name...]

Execute one or more exec blocks after this block, in the same environment.

:when: value (click | load | never)

Determine when the block's code is executed: on user request (click, the default), when the page loads (load) or not at all (never).

Trigger

By default, exec blocks are executed on click (:when: click), with controls displayed next to the block.

select * from countries where country_code = 'LI';

They can also be executed immediately on load (:when: load) or not at all (:when: never), useful for definitions that are referenced by other blocks). The controls displayed depend on the type of block.

select * from countries where country_code = 'LI';

Editor

Blocks can be made editable with the :editor: option.

select * from countries
  where population > 10000000
  order by country_code;

The option takes an optional editor ID. If provided, the content of the editor is saved in browser local storage, and restored on page reload.

Sequencing

The :after: option allows referencing one or more exec blocks on the same page to be executed before the block, in the same environment. The referenced blocks can themselves have :after: options, forming a dependency graph.

Similarly, the :then: option allows referencing one or more exec blocks to be executed after the block. Unlike :after:, only the blocks referenced by the :then: option of the block itself are executed; the :then: options of referenced blocks are ignored.

If a block appears more than once in the graph, only the first occurrence is executed.

-- :name: sql-people
create table people (first_name text not null, last_name text not null);

-- :name: sql-people-select
select * from people;

-- :after: sql-people
-- :then: sql-people-select
insert into people values ('Joe', 'Bar'), ('Jack', 'Sparrow');

Include file content

The :include: option allows including the content of one or more external files. The content of the files is prepended to the block's content.

create table people (name text not null, height real, favorite_food text);
insert into people values
  ('Joe', 1.83, null),
  ('Jack', 1.55, 'burgers'),
  ('Jim', null, 'pizza'),
  ('Anthony', 1.78, null);
select * from people;