<p>Input components allow you to collect user-provided values and store them in your data store. They come with a variety of options to customize their appearance and behavior.</p>
<h2 id="common-settings"><a aria-hidden="true" tabindex="-1" href="#common-settings"><span class="icon icon-link"></span></a>Common settings</h2>
<p>Before we explore each component, it's crucial to understand the common settings that apply to most input components:<br>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/input-settings-img.png" priority="1"></p>
<ul>
<li><strong>Data Key</strong>: A unique identifier used to reference the data collected from the input. It's essential for data binding and ensuring that the input's data can be dynamically used within the tool.</li>
<li><strong>Label</strong>: A descriptive text displayed above or near the input to inform users about the nature of the data being collected. It enhances usability by making interfaces more intuitive.</li>
<li><strong>Placeholder</strong>: A hint or example value displayed inside the input field that guides users on what to enter. It disappears once the user starts typing.</li>
<li><strong>Tooltip</strong>: An optional help text that appears when the user hovers over an info icon or the input field. It's useful for providing additional instructions or clarifications.</li>
</ul>
<h3 id="inputs-with-options"><a aria-hidden="true" tabindex="-1" href="#inputs-with-options"><span class="icon icon-link"></span></a>Inputs with Options</h3>
<p>Select Input, Multi Select Input, and Radio Group Input supports specifying possible options. There are 3 modes<br>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/input-settings-options-img.png"></p>
<h4 id="single-mode"><a aria-hidden="true" tabindex="-1" href="#single-mode"><span class="icon icon-link"></span></a>Single Mode</h4>
<p>In Single Mode, options are provided one by one, where each option has a distinct <code>Option Label</code> and <code>Option Value</code>. This mode is particularly useful when you have a clear, predefined list of options you want to present to the user. Here is an example:<br>
<strong>Select Input for a survey question:</strong> "How did you hear about us?"</p>
<ul>
<li><strong>Option Label:</strong> "Social Media" | <strong>Option Value:</strong> "social_media"</li>
<li><strong>Option Label:</strong> "Friend or Family" | <strong>Option Value:</strong> "friend_family"</li>
<li><strong>Option Label:</strong> "Online Advertisement" | <strong>Option Value:</strong> "online_ad"</li>
<li><strong>Option Label:</strong> "Other" | <strong>Option Value:</strong> "other"</li>
</ul>
<h4 id="bulk-mode"><a aria-hidden="true" tabindex="-1" href="#bulk-mode"><span class="icon icon-link"></span></a>Bulk Mode</h4>
<p>Bulk Mode allows for the addition of options in bulk, either by specifying both <code>Label</code> and <code>Value</code> pairs on each line or by providing just a <code>Value</code>, which then also serves as the label. This mode is efficient for quickly entering a list of options without the need to input them one by one.</p>
<p>Here is an example of "How did you hear about us?" input where you use <code>Label, Value</code> format:</p>
<pre><code>Social Media,social_media
Friend or Family,friend_family
Online Advertisement,online_ad
Other,other
</code></pre>
<p>Here is an example of "Which languages do you use?" input where you use <code>Value</code> format:</p>
<pre><code>Python
JavaScript
C#
Java
</code></pre>
<h4 id="data-key-mode"><a aria-hidden="true" tabindex="-1" href="#data-key-mode"><span class="icon icon-link"></span></a>Data Key Mode</h4>
<p>Data Key Mode dynamically reads options from a data key, which can be the result of an API call, AI content generation, or any other dynamic data source. This mode is highly flexible and allows for options to be updated in real-time based on external data.</p>
<p>For example, let's assume you have an input which says "Select a shipping method"</p>
<ul>
<li>Assume an API call is made to a shipping service to retrieve available shipping options based on the user's location and the package's weight. The result might be stored in a data key named <code>shippingOptions</code>.</li>
<li>The Input would then be configured to read from <code>shippingOptions</code> data key, dynamically presenting the user with the available shipping methods.</li>
</ul>
<p>In this scenario, the options for shipping methods are not hardcoded but are instead dynamically populated based on real-time data, ensuring that the user always has the most accurate and relevant options to choose from.</p>
<h2 id="components"><a aria-hidden="true" tabindex="-1" href="#components"><span class="icon icon-link"></span></a>Components</h2>
<h3 id="text-input"><a aria-hidden="true" tabindex="-1" href="#text-input"><span class="icon icon-link"></span></a>Text Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-text-input-img.png"><br>
A single-line field for entering text. Ideal for short, concise data like names or email addresses. Ensure the placeholder text is clear and the label accurately describes the expected input.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="multiline-text-input"><a aria-hidden="true" tabindex="-1" href="#multiline-text-input"><span class="icon icon-link"></span></a>Multiline Text Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-multiline-input-img.png"><br>
Allows for longer text entries that span multiple lines, such as descriptions or comments. Use a descriptive label and a placeholder that indicates the level of detail expected.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="text-list-input"><a aria-hidden="true" tabindex="-1" href="#text-list-input"><span class="icon icon-link"></span></a>Text List Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-text-list-input-img.png"><br>
Enables users to enter multiple items that are treated as a list. This is useful for collecting a series of related data points, such as skills or interests. Guide users with a clear label and an example in the placeholder.<br>
To be able to enter multiple values, user needs to press <strong>Enter</strong> or <strong>Tab</strong> key. It is good to mention this info in the placeholder.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="text-editor-input"><a aria-hidden="true" tabindex="-1" href="#text-editor-input"><span class="icon icon-link"></span></a>Text Editor Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-text-editor-input-img.png"><br>
A rich text editor that allows for formatting options like bold, italic, and lists. It's suitable for content that requires styling, such as articles or product descriptions.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="advanced-editor-input"><a aria-hidden="true" tabindex="-1" href="#advanced-editor-input"><span class="icon icon-link"></span></a>Advanced Editor Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-advanced-text-editor-input-img.png"><br>
see <a href="/components/advanced-editor-input" title="advanced-editor-input">advanced-editor-input</a></p>
<h3 id="select-input"><a aria-hidden="true" tabindex="-1" href="#select-input"><span class="icon icon-link"></span></a>Select Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-select-input-img.png"><br>
A dropdown menu for selecting a single option from a predefined list. It's crucial to have a clear label and use the placeholder as a prompt like "Select one".</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>, <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a>, and <a href="/inputs#Inputs%20with%20Options" title="Input with Options Settings">Input with Options Settings</a></p>
<h3 id="multi-select-input"><a aria-hidden="true" tabindex="-1" href="#multi-select-input"><span class="icon icon-link"></span></a>Multi Select Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-multiselect-input-img.png"><br>
Similar to Select Input but allows for multiple selections. Useful for filtering options or selecting multiple interests.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>, <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a>, and <a href="/inputs#Inputs%20with%20Options" title="Input with Options Settings">Input with Options Settings</a>. You can also toggle <code>Allow users to add new options</code> checkbox to allow user to add values not in the options dropdown.</p>
<h3 id="radio-group-input"><a aria-hidden="true" tabindex="-1" href="#radio-group-input"><span class="icon icon-link"></span></a>Radio Group Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-radio-input-img.png" width="120"><br>
Presents a set of mutually exclusive options. Only one option can be selected at a time.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>, <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a>, and <a href="/inputs#Inputs%20with%20Options" title="Input with Options Settings">Input with Options Settings</a></p>
<h3 id="checkbox-input"><a aria-hidden="true" tabindex="-1" href="#checkbox-input"><span class="icon icon-link"></span></a>Checkbox Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-checkbox-input-img.png" width="120"><br>
Allows users to select multiple options independently. It's ideal for agreements or features selection. Ensure each checkbox is accompanied by a clear label.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="toggle-input"><a aria-hidden="true" tabindex="-1" href="#toggle-input"><span class="icon icon-link"></span></a>Toggle Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-toggle-input-img.png" width="80"><br>
A switch that toggles between two states, such as ON/OFF. Labels should clearly indicate the function of the toggle, and tooltips can explain the implications of each state.</p>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="range-input"><a aria-hidden="true" tabindex="-1" href="#range-input"><span class="icon icon-link"></span></a>Range Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-range-input-img.png"><br>
A slider for selecting a value within a specific range. In addition to common input settings, it accepts the followings</p>
<ul>
<li><strong>Min</strong>: This is the lowest value that a user can select using the Range Input slider. It sets the starting point of the range.</li>
<li><strong>Max</strong>: This is the highest value that a user can select, marking the end point of the range.</li>
<li><strong>Step</strong>: Defines the increment between values that the user can select. A smaller step value allows for more precise adjustments, while a larger step value offers broader increments.</li>
</ul>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h3 id="file-upload-input"><a aria-hidden="true" tabindex="-1" href="#file-upload-input"><span class="icon icon-link"></span></a>File Upload Input</h3>
<p><img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-file-upload-input-img.png"><br>
The File Upload Input component allows users to upload files directly through the interface. It's designed to handle various file types such as Images and PDFs. Once upload is complete, the url of the uploaded file will be stored in the data key specified in the input's setting.</p>
<p>it accepts</p>
<ul>
<li><strong>File Type</strong>: Specify the types of files that can be uploaded. If you select <code>Image</code>, users can upload <code>.jpg, .jpeg, .png</code>. If you select <code>PDF</code> users can upload <code>.pdf</code> files.<br>
There is a 5MB limit per file limit. If you need higher limits, please contact our support team at <a href="/mailto:support@toolmark">support@toolmark.ai</a>.</li>
</ul>
<p>Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a> and <a href="/inputs#Common%20settings" title="Common Input Settings">Common Input Settings</a></p>
<h2 id="best-practices"><a aria-hidden="true" tabindex="-1" href="#best-practices"><span class="icon icon-link"></span></a>Best Practices</h2>
<ul>
<li>Always use clear and concise labels for each input component to improve user understanding.</li>
<li>Utilize placeholders and tooltips to provide additional guidance, reducing user errors and improving data quality.</li>
<li>Ensure the Data Key is unique for each input to avoid data binding issues.</li>
</ul>

Learn how to build AI Apps and Chrome Extensions without code using Toolmark. Explore the Toolmark Editor and example projects to get started building your own AI tools today.

Getting Started

Learn about the core concepts of the Toolmark builder: Canvas, Component, Action, and Data Store. Understand how these elements interact to create dynamic and interactive AI apps.

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.

Building Chrome Extensions

Learn the essentials of managing your tools with Toolmark's intuitive dashboard. Learn how to organize, access, and embed your tools for enhanced productivity and seamless integration.

Tool Management Basics

Learn how to seamlessly embed your tools directly onto your website to enhance user experience and expand your tool's reach. This guide provides step-by-step instructions for enabling embedding, whitelisting your site, and securely integrating your tool's functionality within your web pages.

Embedding Tools to Your Website

Gain valuable insights into your tool's performance with detailed metrics on action duration, frequency, and type.

Tool Analytics

Learn about the Toolmark Editor interface with this comprehensive guide. Discover how to use the Canvas, Left Menu, Right Menu, and Top Menu to build and customize your tools effectively. Perfect for both beginners and experienced users.

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

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

Organize UI components effectively with containers. Control layout with color, display (flex or grid), alignment, gap, size, and more. Create dynamic interfaces using repeated containers, tabs, and collapsible sections for enhanced user experience.

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.

Inputs

Enhance your productivity with AI Inputs, a powerful tool that integrates AI capabilities into your workflow. Easily add AI actions to your inputs, enabling auto-completion, content generation, and intelligent suggestions.

AI Inputs

Supercharge your Toolmark AI tools with the Advanced Editor Input. This Notion-style component offers customizable toolbars, AI-powered actions for text generation and automation, and user-defined prompts for a personalized writing experience.

Advanced Editor Input

Customize UI components with ease! Learn about common settings like margin, padding, shadow, click/load actions, and conditional visibility to create dynamic and engaging user interfaces.

Common Settings

Learn how to use Actions in Toolmark to generate AI content, fetch external data, and interact with web pages.

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 Prompt Actions

Connect your projects to external platforms & services with Integration Actions. Fetch data via API calls, interact with Airtable & Zapier, scrape websites, send emails, and more. Streamline workflows with powerful integrations.

Integration Actions

Interact with web pages directly from your Chrome Extension using Toolmark Editor. Learn how to read data, update fields, and trigger actions on any website without coding. Install the Toolmark AI Chrome Extension and boost your productivity.

Chrome Extension Actions

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

Learn to build a City Guide Creator with AI using Toolmark's no-code platform. This step-by-step guide covers creating static pages, adding inputs, using AI prompts with GPT and DALL-E, generating images, and working with lists. See a demo and build your own AI-powered city guide today!

Step-by-step City Guide

Generate delicious recipes instantly! Enter your ingredients and preferred cooking style (one-pot, grill, deep-fry), and our AI-powered recipe generator will create a custom dish just for you. Try it now and learn how to build your own AI tools!

Recipe Generator

Learn how to create a Chrome extension that summarizes web page content using GPT-4. This tutorial covers creating actions to read and summarize text, designing UI components, and publishing your extension. Install the Toolmark Chrome Extension and start summarizing!

Content Summarizer Chrome Extension

Build a custom cover letter with AI! This tool uses your resume, job description, and preferred tone (confident, friendly, etc.) to generate a tailored cover letter instantly. Includes example resume and job details to get you started.

Cover Letter Writer

Learn how to build an AI-powered Course Slide Summary and Quiz Generator using Toolmark. This tutorial provides a step-by-step guide to creating a tool that takes course slide PDFs, generates summaries and quizzes using GPT, and displays them interactively with various UI components. Enhance your learning materials and create engaging quizzes effortlessly. No coding required!

Course Slide Summary and Quiz Generator

Generate landing pages instantly with AI! This tool creates headlines, copy, feature lists, and images based on your product description. Learn how to build your own landing page generator using chained AI actions and more. See a demo and start creating today!

Landing Page Builder

Learn how to build a no-code language translator app with Toolmark. This guide covers adding text input, language selection, using GPT-4 for translation, and displaying the results. See a demo and get started building your own AI tools today!