<p>Data binding allows you to write data to the data store using <a href="/components/inputs" title="Input components">Input components</a> and <a href="/actions/actions" title="Actions">Actions</a>, as well as add static data using the <a href="/editor/data-store-menu" title="Data Store Menu">Data Store Menu</a>. You can also read data from the data store using Actions, Text Components, Image Components, Component Conditional Settings, and Input Components with Options.</p>
<h2 id="writing-data-to-data-store"><a aria-hidden="true" tabindex="-1" href="#writing-data-to-data-store"><span class="icon icon-link"></span></a>Writing data to data store</h2>
<h3 id="inputs-data-key"><a aria-hidden="true" tabindex="-1" href="#inputs-data-key"><span class="icon icon-link"></span></a>Input's Data Key</h3>
<p><a href="/components/inputs" title="Input">Input</a> or <a href="/components/ai-inputs" title="AI input">AI input</a> components allow you to specify a <code>Data Key</code> using the <a href="/editor/component-menu" title="Component Setting Menu">Component Setting Menu</a>. This is where to store the data provided by the user using this input field</p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/img-data-binding-input-data-key.png" priority="1"></p>
<h3 id="actions-result-data-key"><a aria-hidden="true" tabindex="-1" href="#actions-result-data-key"><span class="icon icon-link"></span></a>Action's Result Data Key</h3>
<p><a href="/actions/actions" title="Actions">Actions</a> allow you to specify a <code>Result Data Key</code> using the <a href="/editor/action-menu" title="Action Menu">Action Menu</a>. This is where to store the result of the action</p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/img-data-binding-result-data-key.png"></p>
<h3 id="static-data"><a aria-hidden="true" tabindex="-1" href="#static-data"><span class="icon icon-link"></span></a>Static Data</h3>
<p>You can also add static data using <a href="/editor/data-store-menu" title="Data Store Menu">Data Store Menu</a>.<br>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/img-data-binding-static-data-key.png"></p>
<h2 id="reading-data-from-data-store"><a aria-hidden="true" tabindex="-1" href="#reading-data-from-data-store"><span class="icon icon-link"></span></a>Reading data from data store</h2>
<h3 id="actions"><a aria-hidden="true" tabindex="-1" href="#actions"><span class="icon icon-link"></span></a>Actions</h3>
<p>When you create a prompt action, you can use any data keys within your prompts. That means, you can use</p>
<ol>
<li>Data Keys coming from user input through Input Component</li>
<li>Result Data Keys coming from other executed actions</li>
<li>Static Data Keys created from the <a href="/editor/data-store-menu" title="Data Store Menu">Data Store Menu</a></li>
</ol>
<pre><code>You are a professional cover letter writer. You use a {{toneInput}} tone. For the given information about myself and job description, write a cover letter. My info: {{resumeInput}}. Job details: {{jobDetailsInput}}
</code></pre>
<p>You can also use Data Keys in any of the action fields while creating an action from the <a href="/editor/action-menu" title="Action Menu">Action Menu</a>. For example, if you're creating a POST Request action, you can provide this for the <code>body</code> field</p>
<pre><code>{
  "email": "{{userEmailInput}}",
  "name": "{{userNameInput}}",
  "api_key": "ABCD"
}
</code></pre>
<h3 id="text-component"><a aria-hidden="true" tabindex="-1" href="#text-component"><span class="icon icon-link"></span></a>Text Component</h3>
<p>You can access data keys with <code>{{dataKeyName}}</code> syntax within your text component</p>
<pre><code># This is the main heading
## {{generatedTitle}}

{{generatedContent}}

and that's all
</code></pre>
<h3 id="image-component"><a aria-hidden="true" tabindex="-1" href="#image-component"><span class="icon icon-link"></span></a>Image Component</h3>
<p>When you switch Image Component to Manual mode, you can provide a static image url. If the link is not something you can hard-code, but generated by an action (e.g. generated by DALL-E, or read with an API call), then you can access the value with <code>{{dataKeyName}}</code> syntax.<br>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/img-image-setting-mode.png" width="320"></p>
<h3 id="component-conditional-setting"><a aria-hidden="true" tabindex="-1" href="#component-conditional-setting"><span class="icon icon-link"></span></a>Component Conditional Setting</h3>
<p>All the components have a Conditional section in the <a href="/editor/component-menu" title="Component Settings Menu">Component Settings Menu</a>. You can directly provide conditions using Data Keys without using <code>{{}}</code></p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/img-conditional-setting.png"></p>
<h3 id="input-components-with-options"><a aria-hidden="true" tabindex="-1" href="#input-components-with-options"><span class="icon icon-link"></span></a>Input Components with Options</h3>
<p>When you use an <a href="/components/inputs" title="Input Component">Input Component</a> that supports options (like Select Input or Radio Input), you don't have to provide a static-list. Sometimes, you want to show options from a Data Key which is populated by AI or another action.<br>
For example, if you are generating a list of titles for the given topic and then asking user to select one of the generated titles like in <a href="https://blogpost.toolmark.app">our Blog Post Writer example</a>, you can turn on the <code>Data Key</code> options mode for the Radio Group Input and type the Data Key that AI is populating the suggestions into</p>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/img-data-binding-options.png"></p>

Getting Started

Concepts

Learn the power of Toolmark's Data Binding feature. Effortlessly write and read data using input components, actions, and more for enhanced interactivity and user engagement.

Data Binding

Easily transform any AI tool created on Toolmark.ai into a Chrome Extension with no extra effort. Install the Toolmark.ai Chrome Extension, add your tools, and access them directly from any website for a seamless browsing and productivity boost.

How-to Use the Chrome Extension

Explore a variety of Toolmark examples to enhance your AI App building experience. Discover tips, tricks, and templates to boost productivity and organization. Perfect for users at any level!

Examples

examples

Step-by-step City Guide

Recipe Generator

Cover Letter Writer

Course Slide Summary and Quiz Generator

Landing Page Builder

Language Translator

Discover the Toolmark Editor, your ultimate tool creation workspace featuring an intuitive interface with Canvas, Left, Right, and Top Menus for seamless design. Perfect for professionals and beginners alike, it simplifies building and customizing tools with drag-and-drop components, real-time previews, and easy publishing. Start crafting engaging tools today!

Toolmark Editor

editor

Discover the power of the Canvas with its drag-and-drop interface for an intuitive design experience. Learn how to select, customize, and manage UI components like buttons and input fields for your tool's layout.

Canvas

Learn how to use Toolmark's Component Menu for easy drag-and-drop of Containers, Elements, Inputs, and AI Inputs into the canvas, enhancing your tool-building process with customization and efficiency.

Component Menu

Optimize and manage your tool's components with ease using Toolmark's Layer Menu. This feature allows for streamlined visibility control, effortless reordering, and simple renaming of components, enhancing your design process and organization.

Layer Menu

Discover how to enhance your projects with dynamic interactions using the Actions Menu. Learn to create prompt and integration actions for data fetching, AI content generation, and more.

Action Menu

Effortlessly manage and debug your interactive tools with Toolmark's Data Store Menu. Seamlessly add static data to components, enhancing tool functionality and user experience. Ideal for developers seeking efficient state management and debugging solutions.

Data Store Menu

Learn how to use Toolmark's Style Menu to customize and design your tool. Drag and drop components, access functionalities, and explore styling options to create the perfect AI tool for your needs.

Style Menu

Master Toolmark's Tool Config Menu: Easily set up subdomains, titles, descriptions, categories, and cover images to optimize and personalize your tools for better engagement and visibility.

Tool Config Menu

Dive into the essentials of using the Component Settings Menu in Toolmark with our detailed guide. Learn how to effortlessly customize UI components to align with your brand, enhance user experience, and elevate your tool's design.

Component Settings Menu

Enhance your text components with the Bubble Menu, offering customization options like headings, code blocks, links, and text formatting. Utilize markdown for quick edits.

Bubble Menu

Learn Toolmark's Top Menu and how to efficiently use the Back, Undo/Redo, Preview, Save, Publish, and tool naming features to streamline your design process, ensuring a seamless and productive tool creation experience.

Top Menu

Actions

actions

Explore the comprehensive guide to AI Prompts in Toolmark. Learn how to create, chain, and use AI Prompts with various models for dynamic and interactive note-taking. Understand how to leverage variables, output types, and Replicate models for enhanced productivity.

AI Prompts

Chrome Extension Actions

Explore Toolmark Editor's Components: Dive into using Containers, Elements, Inputs, and AI Inputs for crafting interactive, visually stunning tools with ease. Perfect your tool-building with our drag-and-drop interface.

Components

components

Containers

Master the art of document design with our comprehensive guide to elements. Learn how to use text, links, buttons, images, dividers, and HTML to create visually engaging and interactive content.

Elements

Learn about common settings, types of inputs including Text, Multiline, List, Editor, Select, Multi Select, Radio Group, Checkbox, Toggle, and Range Inputs, and best practices for enhancing user interaction and data collection.