how to format code in pipedream code steps
by josh ozuna · codefmt
published June 12, 2026
to format a Pipedream code step, paste your component into codefmt and choose Pipedream. it wraps the code in the right defineComponent or defineSource structure, knows steps and $, and formats javascript, typescript, or python so you can paste just the body and get clean code back.
why a plain formatter struggles with pipedream code
a Pipedream code step is a component, not a standalone script. an action is a defineComponent whose run method receives ({ steps, $ }). paste just the body into a generic formatter and it has no component to attach to; paste it into a generic linter and $ and steps come back as undefined.
codefmt wraps the body in the correct component shape before formatting and declares Pipedream's globals before running oxlint, so the structure formats cleanly and the false positives go away.
how to format a pipedream code step
- copy the code out of your Pipedream code step.
- paste it into the codefmt Pipedream formatter and pick the action or source variant.
- codefmt wraps it correctly, formats, and lints with Pipedream globals recognized.
- copy the formatted result back into the step.
actions vs sources
| component | wrapper | run signature | emits / returns via |
|---|---|---|---|
| action | defineComponent | run({ steps, $ }) | $.export, $.respond, $.send.http |
| source | defineSource | run(event) | this.$emit, state via this.db |
pipedream globals codefmt knows
| identifier | what it is |
|---|---|
$ | action utilities: $.export, $.respond, $.send.http |
steps | outputs of previous steps, e.g. steps.trigger.event |
defineComponent | the action wrapper (props, methods, run) |
event | the triggering payload passed to a source's run |
see how codefmt stacks up against the Prettier playground.
Format your Pipedream code now → paste an action or source and get the component wrapped, formatted, and linted in one pass.
frequently asked questions
how do I format a Pipedream code step?
paste your component code into codefmt and choose Pipedream. it wraps the code in the correct defineComponent or defineSource structure, declares globals like steps and $ so they aren't flagged undefined, and formats javascript, typescript, or python.
what is $ in a Pipedream code step?
$ is the Pipedream utilities object passed to an action's run method. you use $.export('key', value) to pass data downstream, plus $.respond and $.send.http. codefmt recognizes $ as a valid global so it is never reported as undefined.
how do I access data from previous steps?
use steps.step_name.return_value or steps.trigger.event. the steps object holds the outputs of earlier workflow steps. codefmt knows steps is a Pipedream global and keeps your references intact while formatting.
what is the difference between actions and sources?
actions are reusable steps defined with defineComponent; their run method receives ({ steps, $ }). sources are event triggers defined with defineSource; their run method receives (event) directly and they emit via this.$emit. codefmt applies the correct wrapper for whichever you select.
does codefmt support typescript and python in Pipedream?
yes. Pipedream supports typescript natively in components, and codefmt handles type annotations, interfaces, and generics. it also formats Pipedream python steps with ruff. select the Pipedream variant and paste your code.
primary source: Pipedream: Running Node.js in workflows