📖
PixieBrix Documentation
🌳

Brick Builder Skill Tree

0. Documentation

  • The Reference tab in the Workshop allows you to search all the bricks available to you and see their inputs
  • The PixieBrix Marketplace has information on all the public bricks, including "How to Use" sections with information on how to use them

1. Debugging Tools

  • The Page Editor and Workshop both have a "Logs" tab that displays the logs for current brick
  • By default, PixieBrix does not log brick input and outputs (because they may contain PII). To enable enable logging brick inputs and outputs. Settings → Developer Settings
image

2. YAML

YAML (YAML Ain't Markup Language) is a mark up language that's popular for configuration. It's used by popular projects like GitHub Actions, Kubernetes, and more

YAML is the configuration language used in PixieBrix's Workshop. The Page Editor generates YAML automatically. However, it's useful to know the basics to make changes

3. CSS/JQuery Selectors

Selectors are used to place elements on pages, read data, and target elements for actions (e.g., click, highlight, hide, etc.)

PixieBrix supports JQuery selectors because it supports a superset of CSS selectors, such as :contains and :input

For debugging purposes, PixieBrix automatically makes JQuery available on pages the mods has access to. To use it, use $$jquery("selector") in the Chrome DevTools console

4. Mustache: logic-less templates

⚠️
Mustache automatically HTML-escapes strings. If your string might contain special characters, use {{{ or {{& syntax

Mustache is a popular templating library. There's libraries for it in nearly every language

5. REST API Calls

⚠️
API calls are made from the Chrome Extension's Background Page. To view the network requests, visit Chrome's chrome://extensions/ page and click "background page" on the PixieBrix extension's card. The Network Tab only records activity the DevTools are open for the page, so you must retry the network request for it to appear

6. jq

jq is a domain-specific language for selecting/transforming JSON data. In PixieBrix, you use it via the @pixiebrix/jq brick

⚠️
A common trip-up when using jq is that you need to use . when accessing properties in the context (because . refers to the input data to jq)

7. JSON Schema

JSON Schema is specification language for describing the shape of JSON Data. In PixieBrix, we use it to specify the inputs/outputs of bricks.

If you're coming from the Javascript world, JSON Schemas are analogous to React's prop-types or schema validators such as Yup. In the REST API world, these are similar to an OpenAPI/Swagger specification

8. JSON Schema Forms

The forms of @pixiebrix/form-modal and @pixiebrix/form are powered by a library called react-jsonschema-form. The react-jsonschema-form takes a JSON Schema and a UI Schema and produces a form

9. Nunjucks: templates with logic

⚠️
Like Mustache, Nunjucks automatically HTML-escapes special characters. If your string might contain special characters, and you don't want it to be escaped, use the safe filter

Nunjucks (based on Jinja2) is a templating system that supports conditional logic and fields.

10. Regular Expressions

Regular expressions are used to parse text. You can use the @pixiebrix/regex group to capture named groups. The jq brick (see above) also supports regular expressions for test/capture/substitution

Twitter