@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  color: var(--foreground);
  background: var(--background);
  font-family: Arial, Helvetica, sans-serif;
}

@layer components {
  nav [data-active="true"] {
    @apply border-l-2 border-l-primary bg-primary/10 -ml-[1px] pl-[13px] !important;
  }

  nav [data-active="false"]:hover {
    @apply border-l-2 border-l-primary/50 -ml-[1px] pl-[13px] !important;
  }
}

@layer components {
  nav [data-active="true"] {
    @apply border-l-2 border-l-primary bg-primary/10 -ml-[1px] pl-[13px] !important;
  }

  nav [data-active="false"]:hover {
    @apply border-l-2 border-l-primary/50 -ml-[1px] pl-[13px] !important;
  }
} 

/* Sidebar customization */
.sidebar {
    @apply bg-white dark:bg-gray-900;
    border-right: 1px solid var(--border-color);
  }
  
  /* Sidebar links */
  .sidebar-link {
    @apply text-gray-700 dark:text-gray-300;
  }
  
  /* Active sidebar item */
  .sidebar-link.active {
    @apply text-primary font-medium;
    background: var(--primary-light);
  }
  
  /* Sidebar group headers */
  .sidebar-group-header {
    @apply text-sm font-semibold text-gray-900 dark:text-white;
    padding: 0.75rem 1rem;
  }
  
  /* Custom scrollbar for sidebar */
  .sidebar::-webkit-scrollbar {
    width: 4px;
  }
  
  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .sidebar::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: 4px;
  }

.mint-mb-1 {
    margin-bottom: 0.25rem
}
.mint-block {
    display: block
}
.mint-flex {
    display: flex
}
.mint-items-center {
    align-items: center
}
.mint-gap-5 {
    gap: 1.25rem
}
.mint-text-base {
    font-size: 1rem;
    line-height: 1.5rem
}
.mint-text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem
}
.mint-font-semibold {
    font-weight: 600
}
.mint-text-\[\#666666\] {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity))
}
.mint-text-black {
    --tw-text-opacity: 1;
    color: rgb(0 0 0 / var(--tw-text-opacity))
}
.mint-no-underline {
    text-decoration-line: none
}
.dark\:mint-text-\[\#666666\]:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(102 102 102 / var(--tw-text-opacity))
}
.dark\:mint-text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity))
}

Explore the tools available for building and managing your web automations. Below is a summary of what you can do with each tool. Click on any tool button to read more about it.

Tools Overview

Starter Kit

Automate any website using Bytespace 🚀.

Welcome

So, you&#39;re a builder? Whether refining templates or crafting automations from scratch, this is your go-to guide for building reliable workflows—manually or with AI.

Builder Overview

Latest updates and improvements to Bytespace

Release Notes

Community

Frequently asked questions about Bytespace and web automation

FAQs

A comprehensive list of terms used in Bytespace and web automation

Glossary

API Reference

Dashboard

Support

So, you're ready to start automating your work? Let's go! Before jumping in, let's make sure you have all the essentials.

Install Bytespace 🚀

Here's a quick walkthrough of the Bytespace Web-Agent Builder, so you can be building automations like a pro in no time!

Platform Walkthrough

Let's walk through the web-agent builder and create your first automation.

Build Web Agent

Learn how to test and debug your web-agent automations

Test Workflow

Learn how to run your automation and share it with others.

Run Agent Locally

Learn about deploying web-agents to the cloud (Coming Soon)

Deploy (Coming Soon)

Create and structure your automation workflows using modular building blocks. Each block represents an action or decision your agent will take, allowing you to design complex processes with ease and flexibility.

Automation Blocks

Easily identify and target elements on any webpage to build reliable and dynamic workflows. Whether it's a button, form, or specific text, this tool helps you pinpoint exactly what your web-agent needs to interact with.

Element Selector

Validate your selected elements to ensure they're correctly identified and will work reliably across different page states and scenarios. This tool helps prevent automation failures by confirming your selectors are robust.

Verify Selector

Configure and customize your web agent's behavior by setting up input parameters. Define variables, conditions, and data sources that your automation will use during execution.

Web Agent Inputs

Customize how your data is displayed and organized in tables. Add, remove, or modify columns to focus on the information that matters most to your automation workflow.

Edit Table Columns

Leverage AI to optimize your automation workflows. Get intelligent suggestions for improving your selectors, handling edge cases, and making your automations more resilient and efficient.

Enhance Selector w/AI

Capture web interactions automatically by recording your actions. Convert manual processes into automation workflows with just a click of the record button.

Record Workflow

Test individual automation blocks in isolation to verify their functionality. Debug and refine specific actions without running the entire workflow, saving time during development.

Test Step

Document your automation workflow with detailed notes. Add comments, explanations, and documentation to make your automation more maintainable and easier to understand.

Add Notes

Control the timing and pacing of your automation. Add strategic delays and wait conditions to ensure your automation runs at the right speed and handles timing-dependent tasks correctly.

Delay Action

Logs

Collaborate with team members by sharing your automation workflows. Control access permissions and enable team collaboration on automation projects.

Share Workflow

Stay informed about your automation's status with customizable notifications. Get alerts for successful runs, errors, or specific conditions you want to monitor.

Notifications

Deploy

A comprehensive guide to building reliable, efficient, and compliant web automations with Bytespace.

Overview

A comprehensive guide to debugging and optimizing your web automations with Bytespace

Coming Soon

Open and manage new browser tabs in your automation workflow. Use this action to load external pages, handle multi-tab workflows, and navigate between different web applications.

New Tab

Manage and interact with the currently active browser tab. Use this action to ensure your automation continues in the focused tab when working with multiple windows.

Active Tab

Switch between different browser tabs in your automation workflow. Use this action to navigate between tabs based on URL patterns, titles, or positions.

Switch Tab

Navigate to the previous page in browser history. Use this action to return to previously visited pages, handle multi-step workflows, and implement back-navigation patterns.

Go Back

Navigate forward in browser history. Use this action to return to pages after going back, handle multi-step workflows, and implement forward-navigation patterns.

Go Forward

Close browser tabs in your automation workflow. Use this action to manage open tabs, clean up after operations, and maintain a tidy browser state.

Close Tab

Capture screenshots of web pages or elements during automation. Use this action to save visual records, debug UI elements, or document workflow states.

Take Screenshot

Manage file downloads in your automation workflow. Use this action to track downloads, store file paths, and ensure downloads complete successfully.

Handle Download

Refresh the current browser tab. Use this action to update page content, reset form states, and ensure data is current in your automation workflow.

Reload Tab

Retrieve and store the current URL of a browser tab. Use this action to track navigation, save session data, or reference URLs in your automation workflow.

Get Tab URL

Add timed delays to your automation workflow. Use this action to wait for elements to load, ensure actions complete, or simulate human-like interaction timing.

Delay

Export collected data from your automation workflow. Use this action to save table contents or variable values in various formats for analysis or storage.

Export Data

Manage clipboard operations in your automation workflow. Use this action to copy and paste text, transfer data between steps, and interact with clipboard-dependent elements.

Clipboard

Simulate a user clicking on a specific element within a webpage. Use this action to navigate through pages, trigger buttons, open dropdowns, and interact with dynamic elements.

Click Element

Extract text from a specific element on a webpage. Use this action to retrieve information such as product prices, article titles, user-generated content, and other on-page text.

Get Text

Control scrolling behavior of web elements. Use this action to navigate through content, load dynamic elements, or ensure elements are in view before interacting with them.

Scroll Element

Input text into form fields on a webpage. Use this action to fill out login forms, search bars, sign-up fields, and any other text inputs.

Forms

Interact with hyperlinks on a webpage. Use this action to navigate to new pages, open external links, or trigger JavaScript-based navigation.

Link

Get and set element attribute values on a webpage. Use this action to extract data like URLs from href attributes, retrieve alt text, set custom values, or modify properties dynamically.

Attribute Value

Execute custom JavaScript code in your automation. Use this action to run advanced scripts, modify elements, interact with APIs, and perform operations not covered by standard automation blocks.

JavaScript Code

Fire browser and custom events on webpage elements. Use this action to simulate user interactions, trigger JavaScript listeners, and interact with dynamic UI components.

Trigger Event

Upload files to webpage input fields. Use this action to handle file uploads in forms, submit documents, or process media uploads in your automation workflow.

Upload File

Simulate mouse hover interactions on webpage elements. Use this action to trigger tooltips, reveal dropdown menus, and interact with hover-based UI components.

Hover Element

Download and save media elements from webpages. Use this action to collect images, audio, video, or other downloadable files for archiving or further processing.

Save Assets

Simulate keyboard key presses on webpage elements. Use this action to trigger keyboard shortcuts, submit forms, navigate menus, and simulate user input.

Press Key

Dynamically create and insert new HTML elements into webpages. Use this action to modify page structure, inject custom content, and add interactive components.

Create Element

Repeat specific tasks multiple times in your automation

Repeat Task

Add conditional logic to your automation workflows. Use this action to create branching paths, handle different scenarios, and make your automation more dynamic.

Docs

New to Bytespace?

Web Agent Builder

Resources

Tools Overview