Welcome to Kelp! Let's build a simple app, and by doing so learn the fundamentals of using Kelp.

The tutorial will walk you through a data app creation process - build app logic, design the layout and deploy the app, and all in 10 minutes. We will use the data from an external public source as a basis.

Create a new app

So let's create an app!

Sign in to Kelp at https://public.kelp.app. Here you can find your app collections. If you do not have an account yet, refer to Create or join Kelp workspace.

Click the New app button at the top to create your first app in Kelp.

📖 Note. When starting with a new app you're immediately switched to the developer mode. There are also design and user modes. You can easily switch between them by using mode buttons on the top right side of the screen. Learn more by navigating to Kelp User Interface article.

Visual editing on the canvas

1. Place the first component on the canvas.

Every Kelp app is built from components and connections. Choose components from the Components Library, place them on the canvas and connect them to build the app logic.

Let's place the first component on the canvas: right-click anywhere on the canvas to open the Components Library. Browse the components list or type a component name in the search bar. Let's start with an HTTP component. Place the component on the canvas by clicking the Place Component button.

📖 Note. HTTP Component allows you to make HTTP requests to any secured or unsecured resource. See the HTTP component overview.

2. Add the String component.

Now we need to configure the HTTP component to connect the app to a data source. A String component will help us to send an API link to the HTTP component url port.

  • Right-click anywhere on the canvas to open the Components Library.

  • Type String in the search bar and place it on the canvas.

  • Click on the String component and press Spacebar to open its settings.

  • Copy the example API link below and paste it in the text area.

https://vega.github.io/editor/data/cars.json

3. Connect components.

Connect the String output port to the HTTP url port. Once the app is activated, the HTTP gets the link from the String component and uses it to request the specified source. HTTP passes data further through the response port.

💡 Tip! You can find more information about different components and connections between them here 👉 Kelp Docs

Display the data

The next step is to display the data received. There is a special type of Kelp components - widgets. A widget is a component that renders the content and forms the app interface.

1. Use the Table to visualize the data.

One of the easiest ways to display the data is to use a Table:

  • Place a Table widget on the canvas.

  • Drag a wire from the response port of HTTP and drop it on the canvas. It will create you a Port component, and we need it in future steps.

  • Connect the Port component to the data port of the Table widget.

2. Transform the data flow.

Various components return and accept the data in different formats. This is exactly the case! HTTP component sends data in a format that differs from the one the Table widget expects. To handle this, we need to transform the data.

  • Click on the wire connecting the Port and the HTTP component.

  • Press Spacebar to open the connection settings.

  • Choose the KelpQL query language in the "Select tool" dropdown.

  • Enter data value in the middle text field and apply changes.

💡 Tip! You can see how data is being transformed using the "Capture events" feature; just check the Data Transformations article for details. You can also read about other JSON transformation languages supported by Kelp.

Click the Refresh button in the top-right corner of the screen to resume the dataflow.

You can now enlarge the Table widget by stretching its bottom-right corner or right-click the widget to see a table filled with data.

3. Add a chart to the app.

Charts are another way to display your app data. A Vega Chart widget provides various data visualization designs. To add a Vega chart to the app, we need to set the specification that defines the chart's configuration and pass the data to the widget.

  • Place a Vega Chart widget on the canvas. Hold and drag its bottom-right corner to enlarge the widget. The widget preview will be visible right on the canvas.

  • Place a JSON component on the canvas.

  • Click on the component and open its settings dialog.

  • Add the Vega-Lite specification below into the text field.

{

"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A scatterplot showing horsepower and miles per gallons for various cars.",
"data": {"url": "data/cars.json"},
"mark": "point",
"encoding": {
"x": {"field": "Horsepower", "type": "quantitative"},
"y": {"field": "Miles_per_Gallon", "type": "quantitative"}
}
}
  • Place a Vega-Lite Adapter component on the canvas to transform the lite specification into the original Vega spec.

  • Go back to the Port connecting the HTTP component and the Table widget. Drag a wire from the Port to the Vega-Lite Adapter data port.

  • Connect the JSON component output port to the lite-spec port of the Vega-Lite Adapter.

  • Connect the vega-spec port of the Vega-Lite Adapter to the Vega Chart spec port.

  • Refresh the app.

📖 Note. There are two types of Vega chart specifications: Vega and Vega-Lite. Vega-Lite is a simplified version of Vega spec, and you can use any for your Vega Charts. Remember to add Vega-Lite Adapter to the schema when using Vega-Lite specs. See https://vega.github.io/ for specifications.

Design the interface

We have just built the schema of the application and ready to work on the interface. Let's follow a few simple steps.

  • Click on the Design Mode button at the top of the development toolbar.

  • Click on the Widgets Panel button.

  • Drag and drop the Table widget from the widgets panel to the layout.

  • Position the table on the screen.

  • Drag and drop the Vega Chart widget from the widgets panel to the layout.

  • Position the chart on the screen.

  • Switch to the Preview Mode to see the result

That's it! You've built an app that visualizes the data from an external source. Now you're ready to make your own data app connected to any external API.

Resources to help you get started:

  • Kelp Docs - introductions to all features, including resources, guides, and reference documentation.

  • Kelp Glossary of Terms - find the Kelp lingo definition.

  • Sample Apps and Templates - a collection of examples and deep-dive guides to help you make the most of Kelp.

  • Kelp community on Slack - become a part of our community and instantly get help.

  • Feature Requests - tell us your feedback – good and bad, we want it all. 😄

  • Changelog - check it out for new product features, announcements, and development updates.

  • Got questions? Feel free to reach out directly by support@kelp.app.

We're excited to see what you build and help you every step of the way!

What's next?

Go to the next article to learn how to create a Stocks Quote app based on the different data sources.

If you need help or have any questions join our Kelp community on Slack, or reach out to our support team.

Did this answer your question?