Skip to content

docs: Update content and screenshots in development topics #2411

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
szaganek wants to merge 2 commits into
base: master
Choose a base branch
from
Open

docs: Update content and screenshots in development topics #2411

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
766c4c3
docs: Update content and screenshots in development topics
szaganek Apr 9, 2026
6b1e9ce
fix ordered list
szaganek Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions sources/platform/actors/development/quick-start/build_with_ai.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,9 +133,9 @@ claude mcp add apify "https://mcp.apify.com/?tools=docs" -t http

## Provide context to assistants

Every page in the Apify documentation has a **Copy for LLM** button. You can use it to add additional context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions.
Every page in the Apify documentation has a **Copy for LLM** button. Use it to add more context to your AI assistant, or even open the page in ChatGPT, Claude, or Perplexity and ask additional questions.

<img src={copyForAI} alt="Copy for LLM" width="250" />
![Page from the Apify documentation with the Copy for LLM button highlighted](./images/copy-for-llm-button.svg)

## Use `/llms.txt` files

Expand Down
Binary file removed sources/platform/actors/development/quick-start/images/actor-build.png
View file
Open in desktop
Binary file not shown.
Binary file removed sources/platform/actors/development/quick-start/images/actor-run.png
View file
Open in desktop
Binary file not shown.
Binary file removed sources/platform/actors/development/quick-start/images/actor-templates.png
View file
Open in desktop
Binary file not shown.
144 changes: 144 additions & 0 deletions sources/platform/actors/development/quick-start/images/build-actor-in-web-ide.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
144 changes: 144 additions & 0 deletions sources/platform/actors/development/quick-start/images/copy-for-llm-button.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed sources/platform/actors/development/quick-start/images/create-actor.png
View file
Open in desktop
Binary file not shown.
79 changes: 33 additions & 46 deletions sources/platform/actors/development/quick-start/start_web_ide.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,31 @@
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';

## What you'll learn

This guide walks you through the full lifecycle of an Actor using the web IDE in Apify Console. You'll create an Actor from a code template, build it, configure its input, and run it in the cloud.
This guide walks you through the full lifecycle of an Actor using the web IDE in Apify Console: create an Actor from a code template, build it, configure its input, and run it in the cloud.

### Prerequisites
## Prerequisites

- An Apify account. [Sign up for a free account](https://console.apify.com/sign-up) on the Apify website.
To complete this tutorial, you need an Apify account. If you don't have it yet, [sign up for free](https://console.apify.com/sign-up).

### Step 1: Create your Actor
## Step 1: Create your Actor

Log in to [Apify Console](https://console.apify.com), navigate to [**My Actors**](https://console.apify.com/actors/development/my-actors), then click the **Develop new** button. You can also click the **Create** button on the Dashboard and select **Create Actor**.
To create an Actor from a code template:

![Create Actor](./images/create-actor.png)
1. Log in to [Apify Console](https://console.apify.com).
1. In the left-side panel, go to **Development** > **My Actors**.
1. Click **Develop new**.
1. Under **Select a code template**, choose one of the available options. For this tutorial, let's use **Quick start: Crawlee + Cheerio**.

You'll see options to link a Git repository, select a code template, or push code with the Apify CLI.
:::tip Explore Actor templates

Under **Select a code template**, you'll find quick-start templates for TypeScript, Python, and JavaScript. Click **Browse all templates** to see the full list. Choose the template that best suits your needs. For the following demo, we'll proceed with a **Crawlee + Cheerio** template.

:::info Explore Actor templates

Browse the [full list of templates](https://apify.com/templates) to find the best fit for your Actor.
To find a template that best suits your needs, browse the [full list of templates](https://apify.com/templates).

:::

![Templates](./images/actor-templates.png)

After choosing the template, your Actor will be automatically named and you'll be redirected to its page.
Once you choose the template, your Actor is automatically named and you're redirected to its page.

### Step 2: Explore the Actor
## Step 2: Explore the Actor

The provided boilerplate code utilizes the [Apify SDK](https://docs.apify.com/sdk/js/) combined with [Crawlee](https://crawlee.dev/), Apify's popular open-source Node.js web scraping library.

Expand All @@ -48,44 +44,35 @@

:::

### Step 3: Build the Actor

To run your Actor, build it first. Click the **Build** button below the source code.

![Actor source code](./images/actor-source-code.png)
## Step 3: Build the Actor

Once the build starts, the UI transitions to the **Last build** tab, showing build progress and Docker build logs.
The next step it to build the Actor:

![Actor build](./images/actor-build.png)
1. Go to **Source** tab > **Code**.
1. Click **Build**.

:::note Actor creation flow

The UI includes four tabs:

- **Code**
- **Last build**
- **Input**
- **Last run**

This represents the Actor creation flow, where you first build the Actor from the source code. Once the build is successful, you can provide input parameters and initiate an Actor run.

:::
Once the build starts, you're redirected to the **Last build** tab. Here you can check the build progress and view Docker build logs.

### Step 4: Run the Actor
![Source code of an Actor in the web IDE](./images/build-actor-in-web-ide.svg)

Once the Actor is built, you can look at its input, which consists of one field - **Start URL**, the URL where the crawling starts. Below the input, you can adjust the **Run options**:
## Step 4: Run the Actor

- **Build**
- **Timeout**
- **Memory limit**
Finally, it's time to run the Actor:

![Actor input](./images/actor-input.png)
1. Go to **Source** tab > **Input**.
1. Set the **Start URL** to the URL you want to crawl or use the default value.
1. _(Optional)_ To customize the run, expand the **Run options** section. You can adjust the following options:
- **Build** – select the build version to run.

Check failure on line 65 in sources/platform/actors/development/quick-start/start_web_ide.md

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Microsoft.Dashes] Remove the spaces around ' – '.

Raw Output:
{"message": "[Microsoft.Dashes] Remove the spaces around ' – '.", "location": {"path": "sources/platform/actors/development/quick-start/start_web_ide.md", "range": {"start": {"line": 65, "column": 15}}}, "severity": "ERROR"}
- **Timeout** – set the timeout for the run in seconds.

Check failure on line 66 in sources/platform/actors/development/quick-start/start_web_ide.md

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Microsoft.Dashes] Remove the spaces around ' – '.

Raw Output:
{"message": "[Microsoft.Dashes] Remove the spaces around ' – '.", "location": {"path": "sources/platform/actors/development/quick-start/start_web_ide.md", "range": {"start": {"line": 66, "column": 17}}}, "severity": "ERROR"}
- **Memory limit** – allocate the memory for the run. For details, see [Usage and resources](/platform/actors/running/usage-and-resources).

Check failure on line 67 in sources/platform/actors/development/quick-start/start_web_ide.md

View workflow job for this annotation

GitHub Actions / lint 

[vale] reported by reviewdog 🐶
[Microsoft.Dashes] Remove the spaces around ' – '.

Raw Output:
{"message": "[Microsoft.Dashes] Remove the spaces around ' – '.", "location": {"path": "sources/platform/actors/development/quick-start/start_web_ide.md", "range": {"start": {"line": 67, "column": 22}}}, "severity": "ERROR"}
- **Maximum cost per run**.
1. Click **Start**.

To initiate an Actor run, click the **Start** button at the bottom of the page. Once the run is created, you can monitor its progress and view the log in real-time. The **Output** tab will display the results of the Actor's execution, which will be populated as the run progresses. You can abort the run at any time using the **Abort** button.
Once the run starts, you can monitor its progress and view the logs in real-time. To view the results of the Actor's execution, go to the **Output** tab.

![Actor run](./images/actor-run.png)
To stop the run, click **Abort**.

### Step 5: Pull the Actor
## Step 5: Pull the Actor

To continue development locally, pull the Actor's source code to your machine.

Expand Down Expand Up @@ -139,7 +126,7 @@

You can find both by clicking on the Actor title at the top of the page, which will open a new window containing the Actor's unique name and ID.

### Step 6: It's time to iterate!
## Step 6: It's time to iterate!

After pulling the Actor's source code to your local machine, you can modify and customize it to match your specific requirements. Leverage your preferred code editor or development environment to make the necessary changes and enhancements.

Expand Down
Loading