Basic usage

The latest release of sqliteviz is running on Github pages. The simplest way to start is to use sqliteviz there.

Choose a databese or CSV file

You can choose a database or CSV file right on the welcom page (fig. 1). The supported file extentions: .csv, .db,.sqlite and .sqlite3.

_{Fig. 1: Welcome page}

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}

If you don't have a database or CSV press Create empty database button and then fill an empty database using DDL and DML statements. A tab with an example of how to do it will be opened automatically (fig. 3).

_{Fig. 3: Editor (empty database)}

Database tables, columns and their types are shown in the left panel of the Editor (fig. 4).

_{Fig. 4: Editor (not empty database)}

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 or DDL/DML statements for modifying the database.

Note: The query editor can show you hints: SQL keywords, table and column names. In a common case column names are shown in the hint if you specify the table name, e.g. SELECT table_name.. But if there is only one table in your database column names will be always available in the hint. Press Ctrl+Space to call a hint explicitly.

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 the query running (fig. 5). In the chart view, there is a chart editor component that allows building a visualization 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 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.