If you choose a CSV file it will be parsed. Then sqliteviz creates a new database with data from the CSV in csv_import table. You can change parsing settings in the dialog which is shown automatically if you choose a CSV file (fig. 2).

_{Fig. 2: Import CSV dialog}

Choosing a database or CSV file is not a mandatory step. You can skip it and manipulate queries in sqliteviz without a database. Choose a database or CSV later in the left panel of the Editor when it's time to run a query (fig. 3).

_{Fig. 3: Editor (neither database nor CSV is chosen)}

After chosing a database or CSV you can browse tables, columns and their types in the left panel of the Editor (fig. 4).

_{Fig. 4: Editor (database is chosen)}

Create a query

Open a new tab

Press Create button in the top toolbar or use Ctrl+b(Cmd+b for MacOS) keyboard shortcut to open a new tab for a query. The tab consists of two parts: a query text editor on the top and a result panel on the bottom.

In the query text editor part you can specify a SELECT statement for getting data.

The result panel has two modes: table view (fig. 4, fig. 5) and chart view (fig. 3). In the table view you can see the result of query running (fig. 5). In the chart view there is a chart editor component which allows to build a visialization from the result set.

Run a query

Press Run button in the top toolbar or use Ctrl+r or Ctrl+Enter(Cmd+r or Cmd+Enter for MacOS) keyboard shortcut to execute a query in the current opened tab.

Note: Running is not available if neither a database nor CSV was chosen or a query for the current tab is not specified.

The query result will be displayed in the result panel in table mode (fig. 5).

_{Fig. 5: Query results}

Create a chart

After running a query you can switch result panel to the chart mode and create a chart with a react-chart-editor component. The same component with some additional features is used in Plotly Chart Studio. Explore its documentation to learn how to build charts with react-chart-editor.

Save a query

Press Save button in the top toolbar or use Ctrl+s(Cmd+s for MacOS) keyboard shortcut to save a query in the current opened tab to local storage of your browser.

After that the query will be in the list on My queries page.

Note: Only the text of the query and chart settings will be saved. The result of the query execution won't be saved.

Working with saved queries

You can find all queries that you saved in My queries (fig. 6).

_{Fig. 6: My queries}

To manipulate one query hover the cursor over the row with the query and choose the action:

- rename a query
- duplicate a query
- export a query to json file
- delete a query

To edit the text of a query or its chart settings click on the respective row. You will be redirected to Editor where the chosen query will be opened in a tab.

Note: After opening a query there will be no chart for it even if you specified it and saved. That is so because there is no data to build the chart. Run the query and all saved chart settings will be applied.

You can also delete or export to file a group of queries. Select queries with checkboxes and press Delete/Export button above the grid (fig. 7).

_{Fig. 7: My queries: a group of queries is selected}

Note: Some operations are not available for predefined queries (see below).

Import queries

Click Import button on My queries page to import queries from JSON file generated by export.

Predefined queries

If you run sqliteviz on your own server you can specify predefined queries. These queries will be in My queries list for all users working with sqliteviz on your server.

To create a list of predefined queries choose queries in My queries list and export them to queries.json. Then place this file on the server in the same directory as index.html.

A user can't edit, rename or delete a predefined query. The rest operations are available.

Motivation

It's a kind of middleground between Plotly Falcon and Redash.

Components

It is built on top of react-chart-editor, sql.js and Vue-Codemirror in Vue.js. CSV parsing is performed with Papa Parse.

Languages

JavaScript 63.7%

Vue 31.7%

CSS 1.5%

Python 1.4%

Jupyter Notebook 1%

Other 0.6%