### Example Product API Request

Source: https://docs.weweb.io/web-development-basics/understanding-apis

Presents an example of an HTTP GET request to an online store's API to retrieve a list of products. It includes parameters for filtering by category and limiting the number of results, demonstrating practical API usage for data retrieval.

```http
GET https://my-store-api.com/products?category=electronics&limit=10
```

--------------------------------

### Example Weather API Request

Source: https://docs.weweb.io/web-development-basics/understanding-apis

Demonstrates a simple GET request to a weather API to fetch current weather conditions for a specific city. This showcases the URL structure and query parameters used to make the request.

```http
GET https://weather-api.example.com/current?city=Paris
```

--------------------------------

### Select Element Examples

Source: https://docs.weweb.io/elements/select

Examples demonstrating how to configure specific features of the Select element, such as tags input, people picker, and payment method display.

```APIDOC
## Select Element Usage Examples

### Tags input (multiple)

1. Set `Type` to `multiple`.
2. Bind `Options` to your tags collection (`[{ label, value }]`).
3. Enable `Unselect on click` so clicking a selected chip removes it.
4. Limit to 5 using `Limit`.

### People picker with avatars (image + text)

1. Set `Option type` to `imageText`.
2. Map `Image per item` to your `avatar` field and `Label per item` to `name`.
3. Enable `Search` and search by `name` and `email`.

### Payment method with icons (icon + text)

1. Set `Option type` to `iconText`.
2. Map `Icon per item` based on your icon code and `Label per item` to the method name.
3. Mark certain options as disabled with `Disabled condition per item`.
```

--------------------------------

### Example Variable Values for Select Component

Source: https://docs.weweb.io/elements/select

Demonstrates example values for the 'value' variable in a select component, showing both single and multiple selection scenarios.

```javascript
value (single)
javascript
```
"opt1"
```

value (multiple)
javascript
```
["opt1", "opt3"]
```
```

--------------------------------

### API Request to Read Data (GET)

Source: https://docs.weweb.io/web-development-basics/apis-and-databases

Demonstrates a frontend request to an API to retrieve data, typically for viewing. The example shows a GET request with a query parameter to filter products by category.

```http
GET /api/products?category=electronics
```

--------------------------------

### Start WeWeb Project Deployment (POST)

Source: https://docs.weweb.io/settings-billing-code-export/code-export-api

Initiates the deployment of a WeWeb project to a specified environment. Supports raw or built ZIP deployments and GitHub integration. Requires workspace and project IDs. Returns deployment status and version information.

```javascript
fetch('https://api.weweb.io/public/v1/workspaces/{{:workspaceId}}/projects/{{:projectId}}/deploy', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    env: 'production', // or 'staging'
    commit: 'Optional commit message',
    rawZip: true, // or false
    builtZip: false, // or true
    githubEnabled: false // or true
  })
})
.then(response => response.json())
.then(data => console.log(data));

```

--------------------------------

### Start Deployment

Source: https://docs.weweb.io/settings-billing-code-export/code-export-api

Initiates the deployment of a WeWeb project to a specified environment (staging or production).

```APIDOC
## POST /public/v1/workspaces/{{:workspaceId}}/projects/{{:projectId}}/deploy

### Description
Starts the deployment of a WeWeb project.

### Method
POST

### Endpoint
`https://api.weweb.io/public/v1/workspaces/{{:workspaceId}}/projects/{{:projectId}}/deploy`

### Parameters
#### Path Parameters
- **workspaceId** (string) - Required - The ID of the workspace.
- **projectId** (string) - Required - The ID of the project.

#### Query Parameters
None

#### Request Body
- **env** (string) - Required - The target environment for deployment (`production` or `staging`). Deploying to `production` also deploys to `staging`.
- **commit** (string) - Optional - A string to be used as commit information.
- **rawZip** (boolean) - Optional - If `true`, the deployment generates a ZIP containing raw project files.
- **builtZip** (boolean) - Optional - If `true`, the deployment generates a ZIP containing built project files.
- **githubEnabled** (boolean) - Optional - If `true`, the deployment pushes raw project files to the configured GitHub repository.

### Request Example
```json
{
  "env": "production",
  "commit": "Initial commit",
  "rawZip": true,
  "builtZip": false,
  "githubEnabled": true
}
```

### Response
#### Success Response (200)
- **message** (string) - Progress message of the deployment.
- **status** (string) - Current status of the deployment (`deploying`, `deployed`, `failed`).
- **version** (integer) - The version number of the current publish.
- **createdAt** (string) - The date and time when the deployment was created.

#### Response Example
```json
{
  "message": "Fetching data",
  "status": "deploying",
  "version": 33,
  "createdAt": "2022-12-12T16:13:47.142Z"
}
```
```

--------------------------------

### Complex Filter Combining Single and Multiple Conditions in JavaScript

Source: https://docs.weweb.io/elements/data-grid

A comprehensive JSON example showcasing a complex filter setup. It combines a single 'equals' filter for 'Category' with 'AND' conditions for 'Price' range and 'OR' conditions for 'Name' text matching.

```javascript
{
  "Category": {
    "filterType": "text",
    "type": "equals",
    "filter": "Electronics"
  },
  "Price": {
    "operator": "AND",
    "conditions": [
      {
        "filterType": "number",
        "type": "greaterThan",
        "filter": 50
      },
      {
        "filterType": "number",
        "type": "lessThan",
        "filter": 200
      }
    ]
  },
  "Name": {
    "operator": "OR", 
    "conditions": [
      {
        "filterType": "text",
        "type": "contains",
        "filter": "Pro"
      },
      {
        "filterType": "text",
        "type": "contains",
        "filter": "Premium"
      }
    ]
  }
}
```

--------------------------------

### WeWeb Supabase Sign Up Workflow Example

Source: https://docs.weweb.io/plugins/auth-systems/supabase-auth

Demonstrates setting up a sign-up workflow in WeWeb using the Supabase Auth plugin. It shows how to trigger the 'Sign up' action on form submission and map form fields to Supabase user data, including metadata.

```javascript
// Workflow Trigger: On submit of the sign-up form
// Action: Supabase Auth - Sign up
// Mappings:
//   - form_email -> email
//   - form_password -> password
//   - form_username -> metadata.name
// Redirect Page: Specify the page to redirect after successful sign-up.
```

--------------------------------

### Configuring secure prompts in WeWeb OpenAI Plugin

Source: https://docs.weweb.io/plugins/extensions/open-ai

This example shows how to define prompts within the WeWeb OpenAI plugin configuration. This method secures sensitive prompt content by storing it at the plugin level, rather than embedding it directly in workflow actions or client-side code.

```json
{
  "openai_api_key": "YOUR_OPENAI_API_KEY",
  "prompts": {
    "name_generator": "Propose a name for a {fill_in_the_blank}"
  }
}
```

--------------------------------

### Example Product API Response (JSON)

Source: https://docs.weweb.io/web-development-basics/understanding-apis

Provides a sample JSON response from an e-commerce API, detailing a list of products. Each product object includes properties like ID, name, price, and stock availability, showcasing how structured data is returned by APIs.

```json
{
  "products": [
    {
      "id": 101,
      "name": "Wireless Headphones",
      "price": 89.99,
      "in_stock": true
    },
    {
      "id": 102,
      "name": "Smartphone Charger",
      "price": 24.99,
      "in_stock": true
    },
    // 8 more products...
  ],
  "total_count": 45,
  "page": 1
}
```

--------------------------------

### Receive broadcast events using WeWeb and Supabase

Source: https://docs.weweb.io/websockets/supabase-realtime/broadcast-message

This workflow setup listens for new broadcast events on a specified Supabase realtime channel. It's crucial to execute these workflows at the page or app level. The example logs the entire event object for debugging and updates a variable with the event's payload for UI updates.

```WeWeb Workflow
Workflow triggered on new broadcast event:
  Channel: "room1"
  Event: "broadcast"
  Actions:
    - Logs: Bind to entire workflow Event object
    - Update variable: Bind to workflow Event.payload
```

--------------------------------

### WeWeb Supabase Login Workflow Example

Source: https://docs.weweb.io/plugins/auth-systems/supabase-auth

Illustrates setting up a login workflow in WeWeb using the Supabase Auth plugin. It shows how to use the 'Login' UI element, which comes with a predefined 'Login with email' action, or how to implement custom login logic.

```javascript
// Example using the predefined 'Login' UI element:
// This element includes a workflow using the 'Login with email' action.

// For custom forms:
// Workflow Trigger: On submit of the login form or On click of a login button
// Action: Supabase Auth - Login with email
// Mappings:
//   - form_email_input -> email
//   - form_password_input -> password
// Redirect Page: Specify the page to redirect after successful login.
```

--------------------------------

### JavaScript Array Example: Countries

Source: https://docs.weweb.io/formulas/array

An example of a JavaScript array containing country names. This array is used in subsequent examples for demonstrating array manipulation formulas like `join`, `length`, `merge`, and `prepend`.

```javascript
// countries array
[
    "France",
    "USA",
    "Belgium",
    "Croatia"
]
```

--------------------------------

### Example Event Payloads - Javascript

Source: https://docs.weweb.io/elements/date-pickers

Illustrates example payloads for the 'On change' and 'On flow step' event triggers in JavaScript. These examples show the structure of the 'value' property for single, range, and multi-date selection modes, as well as for flow steps.

```javascript
{
  value: "2025-01-15T10:30:00.000Z"
}
```

```javascript
{
  value: {
    start: "2025-01-15T00:00:00.000Z",
    end: "2025-01-20T00:00:00.000Z"
  }
}
```

```javascript
{
  value: [
    "2025-01-15T00:00:00.000Z",
    "2025-01-18T00:00:00.000Z",
    "2025-01-22T00:00:00.000Z"
  ]
}
```

```javascript
{
  value: 2  // Current step number in the flow
}
```

--------------------------------

### Basic CSS Syntax and Example

Source: https://docs.weweb.io/web-development-basics/understanding-html-css-javascript

This snippet outlines the fundamental syntax of CSS, showing how selectors target HTML elements and declarations define their styling properties. It includes a basic example targeting an 'h1' element for color, font size, and text alignment, along with a class selector '.highlight' for background and font weight.

```css
/* Basic syntax */
selector {
  property: value;
}

/* Simple example */
h1 {
  color: blue;         /* Text color */
  font-size: 24px;     /* Text size */
  text-align: center;  /* Alignment */
}

.highlight {
  background-color: yellow;
  font-weight: bold;
}
```

--------------------------------

### Example Event Payloads for Select Component

Source: https://docs.weweb.io/elements/select

Illustrates example payloads for 'onChange' and 'onInitValueChange' events in a select component, covering single and multiple selections.

```json
On change (single) 
json
```
{
  "value": "opt1"
}
```

On change (multiple) 
json
```
{
  "value": ["opt1", "opt3"]
}
```

On init value change 
json
```
{
  "value": ["opt2"]
}
```
```

--------------------------------

### Dynamic Icon Binding Example (WeWeb Logic)

Source: https://docs.weweb.io/elements/icon

Demonstrates how to dynamically select an icon based on a condition using WeWeb's logic functions. It emphasizes using full icon paths to avoid deployment issues, especially with GitHub.

```webl
if(condition, "lucide/my-icon", "lucide/other-icon")
```

--------------------------------

### Create WeWeb REST API Collection Example

Source: https://docs.weweb.io/plugins/data-sources/rest-api

This example demonstrates how to create a new collection in WeWeb using the REST API data source to fetch and display data, with options for filtering, pagination, and fetch timing. It highlights configuration in the 'Data' tab and selecting 'REST API' as the source.

```json
{
  "collectionName": "YourCollectionName",
  "dataSource": "REST API",
  "apiConfig": {
    "url": "https://rickandmortyapi.com/api/character",
    "method": "GET",
    "headers": {
      "Authorization": "Bearer YOUR_API_KEY"
    },
    "resultKey": "results"
  },
  "frontendPagination": true,
  "fetchOnNavigation": true
}
```

--------------------------------

### Example formData Object

Source: https://docs.weweb.io/elements/form-container

The formData object provides direct access to the current values of form fields. This example shows email and password fields.

```json
{
  "email": "user@example.com",
  "password": "example1"
}
```

--------------------------------

### Custom Calendar Header Prompt Example

Source: https://docs.weweb.io/elements/calendar

An example prompt to generate a custom calendar header design using AI. This assumes the default header is hidden and a custom one is being built.

```text
Please create a custom header for my calendar. I want a sleek, modern design.
```