Inline vs. external inputs
Stay organized with collections
Save and categorize content based on your preferences.
Inputs can be rendered inline or externally. This controls whether the
connectors for value inputs are rendered inside the block (inline) or on the
outside edge (external), as well as whether inputs are rendered in the same or
different rows.

The block definition can specify an optional boolean controlling whether inputs
are inline or not.
JSON
{
// ...,
"inputsInline": true
}
JavaScript
init: function() {
// ...
this.setInputsInline(true);
}
When this boolean is set to true
(inline inputs):
- The connectors for value inputs are rendered inside the block.
- Statement inputs are rendered on their own row.
- Dummy, end-of-row, and value inputs are all rendered in the same row, except
that any input following a statement or end-of-row input is rendered on a
new row.
When it is set to false
(external inputs):
- The connectors for value inputs are rendered on the outside edge of the
block.
- All inputs are rendered in their own row, except that an end-of-row input
that follows a dummy input is rendered in the same row as the dummy input.
If you're having trouble visualizing this, construct blocks in the
Blockly Developer Tools and choose different settings for the
inputs
dropdown (automatic
, external
, inline
).
If this boolean is not defined then Blockly will use some heuristics to guess
which mode is
best. Assuming Blockly makes the right choice, leaving this field undefined
is preferable since different language translations can automatically have
different modes. See the example of "set %1 to %2"
(external inputs) and
"put %2 in %1"
(inline inputs) in Interpolation token
order.
Use inline inputs when a block is likely to have small inputs such as numbers.
The user can toggle this option through the context menu.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2025-06-24 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-06-24 UTC."],[],[],null,["# Inline vs. external inputs\n\nInputs can be rendered **inline** or **externally**. This controls whether the\nconnectors for value inputs are rendered inside the block (inline) or on the\noutside edge (external), as well as whether inputs are rendered in the same or\ndifferent rows.\n\nThe block definition can specify an optional boolean controlling whether inputs\nare inline or not. \n\n### JSON\n\n {\n // ...,\n \"inputsInline\": true\n }\n\n### JavaScript\n\n init: function() {\n // ...\n this.setInputsInline(true);\n }\n\nWhen this boolean is set to `true` (inline inputs):\n\n- The connectors for value inputs are rendered inside the block.\n- Statement inputs are rendered on their own row.\n- Dummy, end-of-row, and value inputs are all rendered in the same row, except that any input following a statement or end-of-row input is rendered on a new row.\n\nWhen it is set to `false` (external inputs):\n\n- The connectors for value inputs are rendered on the outside edge of the block.\n- All inputs are rendered in their own row, except that an end-of-row input that follows a dummy input is rendered in the same row as the dummy input.\n\nIf you're having trouble visualizing this, construct blocks in the\n[Blockly Developer Tools](https://google.github.io/blockly-samples/examples/developer-tools/index.html) and choose different settings for the\n`inputs` dropdown (`automatic`, `external`, `inline`).\n\nIf this boolean is not defined then Blockly will use some heuristics to guess\nwhich mode is\nbest. Assuming Blockly makes the right choice, leaving this field undefined\nis preferable since different language translations can automatically have\ndifferent modes. See the example of `\"set %1 to %2\"` (external inputs) and\n`\"put %2 in %1\"` (inline inputs) in [Interpolation token\norder](/blockly/guides/create-custom-blocks/define/structure-json#interpolation_token_order).\n\nUse inline inputs when a block is likely to have small inputs such as numbers.\nThe user can toggle this option through the context menu."]]