Welcome to your go-to guide for mastering the elements of our platform. Whether you're crafting your first page or looking to add more flair to your existing content, this guide will walk you through using various elements effectively. Let's dive in!
<h2 id="text"><a aria-hidden="true" tabindex="-1" href="#text"></a>Text</h2>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-element-text-img.png" priority="1" width="300"> 
Starting with the basics, the Text element allows you to add written content to your page. Most of its settings can be accessed through the <a href="/editor/bubble-menu" title="Bubble Menu">Bubble Menu</a>, which shows up when you selected a text. From the bubble menu, you can
<ol>
<li>Modify the type of the text
<ul>
<li>Paragraph: Use this for standard text.</li>
<li>Heading: Organize your document with headings to make it easier to navigate.</li>
<li>Numbered/Bullet List: Create lists to organize information clearly.</li>
<li>Code: Ideal for including code snippets.</li>
<li>Blockquote: Highlight quotes or important information.</li>
</ul>
</li>
<li>Add emphasis or style to your text by making it bold, italic, underlined, or strikethrough. These options are perfect for drawing attention to key points.</li>
<li>Add links to parts of the text, making your document more interactive and resourceful.</li>
</ol>
You can also use markdown syntax for faster writing
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="link"><a aria-hidden="true" tabindex="-1" href="#link"></a>Link</h2>
The Link element is a simplified version of the Text component, focusing solely on adding hyperlinks to your document.
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="button"><a aria-hidden="true" tabindex="-1" href="#button"></a>Button</h2>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-element-button-img.png" width="300"> 
Buttons are essential for creating interactive experiences. They can be customized to fit the look and feel of your project while performing various actions. Here's how you can configure buttons:
<ul>
<li>Variant: Choose the appearance of your button based on its purpose. Variants include primary, secondary, success, error, and more. Each variant has a predefined style that communicates its function to your audience. You can set your color scheme from the <a href="/editor/style-menu" title="Style Menu">Style Menu</a></li>
<li>Size: Adjust the size of your button to ensure it fits well within your layout. Available sizes are xs (extra small), sm (small), md (medium), and lg (large).</li>
<li>Action: The most crucial aspect of a button is the action it performs. You can select an action you created from the <a href="/editor/action-menu" title="Actions Menu">Actions Menu</a>. If your workflow requires a button to perform multiple actions sequentially, you can create a Chain Action in the Actions Menu. Once created, select this Chain Action for your button to execute the series of actions when clicked.</li>
</ul>
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="image"><a aria-hidden="true" tabindex="-1" href="#image"></a>Image</h2>
Images play a vital role in making your content visually engaging. With the Image component, you have the flexibility to display images from various sources. Here's how to add images:
<ul>
<li>Selecting an Image: You can choose an image from your asset library, which allows for easy access to previously uploaded images, or allow uploading new images.</li>
<li>Manual Source: For more control, you can manually provide a source URL for your image. This option is particularly useful when you need to display images dynamically. For instance:
<ul>
<li>Fixed URLs: Directly enter the URL of the image you wish to display.</li>
<li>Data Keys: Utilize data keys to show images generated by an AI action or based on specific data points. This method is ideal for personalized or dynamically generated content.</li>
</ul>
</li>
</ul>
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="divider"><a aria-hidden="true" tabindex="-1" href="#divider"></a>Divider</h2>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/component-element-divider-img.png" width="300"> 
The Divider is a simple yet powerful tool to visually separate content within your pages. It's essentially a horizontal line that can help organize your content and make it easier for readers to navigate through different sections.
You can also add some content that will appear centered on the line, serving both as a separator and a subtle headline.
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="sketchpad"><a aria-hidden="true" tabindex="-1" href="#sketchpad"></a>SketchPad</h2>
<img src="https://s3.us-east-1.amazonaws.com/resource.mixa.site/toolmark/img/components-sketchpad.png"> 
SketchPad offers a dynamic and interactive canvas for sketching and brainstorming. Perfect for visual thinkers, the SketchPad allows you to create freeform drawings, diagrams, and notes directly within your tool's interface. 
Best of all, you can access the sketch using the "Export SketchPad" action and pass it to AI as an image input. Whether you're providing feedback on some flows drawn by your users or transforming a sketch into a website with AI, your imagination is the only limit.
<h2 id="html-view"><a aria-hidden="true" tabindex="-1" href="#html-view"></a>HTML View</h2>
For those who need more customization and control over their content, the HTML View component is a game-changer. It allows you to insert your own custom HTML code, enabling the creation of unique elements that are not available through standard tools. Here's how to make the most of it:
<ul>
<li>Using HTML View: To start, select the HTML View component from your tools menu.</li>
<li>Providing Custom HTML: In the HTML View settings, you can enter your custom HTML code. This is where you can get creative, adding anything from custom forms, embedded widgets, to personalized styling that matches your brand or content theme.</li>
<li>Rendering HTML: Once you've provided your HTML code, the HTML View component will render it as part of your content. This means you can integrate custom-designed elements seamlessly with the rest of your content, offering a richer and more engaging experience for your readers.</li>
</ul>
While providing Content setting, you can also use your data keys
<pre><code>&#x3C;div style="padding:20px;">
 &#x3C;h1 style="color:blue;">{{fullName}} in blue&#x3C;/h1>
 &#x3C;h2 style="color:blue;">{{address}} in blue&#x3C;/h2>
 &#x3C;p>{{coverLetter}}&#x3C;/p>
&#x3C;/div>
</code></pre>
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="pdf-view"><a aria-hidden="true" tabindex="-1" href="#pdf-view"></a>PDF View</h2>
This is similar to the <a href="/#HTML%20View" title="HTML View">HTML View</a>, but the content will be turned into a PDF document.
Base Font Size: Control the base font size for all text within the PDF, including headings. 
Page Type: Choose from standard page sizes like A4 and Letter, or select "Pageless" for a continuous, scrolling PDF. 
Page Padding: Adjust the padding around the content on each page. 
Toolbar Actions: Configure which actions are available in the PDF viewer toolbar, such as download and zoom controls. 
File Name: Specify the default file name for downloaded PDFs (when the download action is enabled).
Content: Define the PDF content using HTML. You can embed data keys for dynamic content and apply basic styling. Example:
<pre><code>&#x3C;h1>My Title&#x3C;/h1>
&#x3C;p style="background-color:blue;color:white;">
 Hello,
 {{myContent}}
&#x3C;/p>
</code></pre>
Content Input Methods: 
There are several ways to provide content to the PDF View component: 
1. Direct HTML Input: Enter HTML directly into the Content field, including data keys and styling. 
2. AI Action Output: Use the output of an AI Action as the content source. 
First, create a prompt action from the <a href="/editor/action-menu" title="Action Menu">Action Menu</a>
<ul>
<li>Model: <code>GPT 4</code></li>
<li>Name: <code>write letter</code></li>
<li>Prompt: <code>Write a sample cover letter</code></li>
<li>Output Type: <code>Text</code></li>
<li>Result Data Key: <code>coverLetter</code> 
Then, reference this data key in the PDF View's Content field from its <a href="/editor/settings-menu" title="Settings Menu">Settings Menu</a></li>
<li>Content: <code>{{coverLetter}}</code></li>
</ul>
3. Text Editor Input: Use the value of an input component as the content source 
First, add a new <a href="/inputs#Text%20Editor%20Input" title="Text Editor Input">Text Editor Input</a> or <a href="/components/advanced-editor-input" title="Advanced Editor Input">Advanced Editor Input</a> to your <a href="/editor/canvas" title="canvas">canvas</a>
<ul>
<li>Set its <code>Data Key</code> to <code>userContent</code> 
Then, use the data key of the input component in your PDF View's Content field from its <a href="/editor/settings-menu" title="Settings Menu">Settings Menu</a></li>
<li>Content: <code>{{userContent}}</code></li>
</ul>
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h2 id="pdf-link"><a aria-hidden="true" tabindex="-1" href="#pdf-link"></a>PDF Link</h2>
The PDF Link component provides a simple way to generate a downloadable link for a PDF file. It shares many of the same settings as <a href="/elements#PDF%20View" title="the PDF View">the PDF View</a> component, but instead of displaying the PDF directly, it presents a link that users can click to download the file.
When to Use: 
This component is particularly useful when the content of the PDF is already visible to the user, such as within an <a href="/components/advanced-editor-input" title="Advanced Editor">Advanced Editor</a> or other display component such as <a href="/elements#Text" title="Text">Text</a>. In these cases, the PDF Link offers a convenient download option without redundant previewing. See the <a href="/elements#PDF%20View" title="PDF View">PDF View</a> section for more details on using PDF Link with text editors.
Supports <a href="/components/common-settings" title="Common Component Settings">Common Component Settings</a>
<h3 id="audio-recorder"><a aria-hidden="true" tabindex="-1" href="#audio-recorder"></a>Audio Recorder</h3>
The Audio Recorder component enables users to record audio directly within your tool, making it particularly useful for applications that require voice notes, interviews, or audio feedback. Once the recording is complete, the audio file is stored in the specified data key. The recorded audio can also be sent to AI audio models for further processing.
<ul>
<li>Data Key: This is a unique identifier used to reference the data collected from the input. It is essential for data binding, ensuring that the input's data can be dynamically utilized within the tool.</li>
</ul>
<h3 id="audio-player"><a aria-hidden="true" tabindex="-1" href="#audio-player"></a>Audio Player</h3>
The Audio Player component allows users to play audio files within your tools. This component is ideal for applications where audio playback is necessary, such as language learning tools, podcasts, or music applications. Additionally, you can use TextToSpeech AI models to generate audio and play it using the Audio Player.
<ul>
<li>Source: This setting specifies the URL, base64 audio content, or a data key that stores the source content.</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!