{"result":{"depiction_url":null,"edges":{"in_module":{"objects":[{"created":"2020-05-30T05:47:18Z","object_id":{"id":1303,"is_a":["text","documentation","reference","module"],"name":"doc_module_mod_wires","title":"mod_wires","uri":"https:\/\/zotonic.com\/id\/1303"},"seq":1000000}],"predicate":{"id":333,"is_a":["meta","predicate"],"name":"in_module","title":{"_type":"trans","tr":{"en":"In module"}},"uri":"https:\/\/zotonic.com\/id\/in_module"}},"references":{"objects":[{"created":"2020-05-30T05:47:18Z","object_id":{"id":1302,"is_a":["text","documentation","developerguide"],"name":"doc_developerguide_server_browser_interaction","title":{"_type":"trans","tr":{"en":"Handle a browser event with a wire"}},"uri":"https:\/\/zotonic.com\/id\/1302"},"seq":1000000}],"predicate":{"id":332,"is_a":["meta","predicate"],"name":"references","title":{"_type":"trans","tr":{"en":"References"}},"uri":"https:\/\/zotonic.com\/id\/references"}},"refers":{"objects":[{"created":"2026-10-21T22:03:31Z","object_id":{"id":1371,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_javascript","title":"javascript","uri":"https:\/\/zotonic.com\/id\/1371"},"seq":1000000},{"created":"2026-10-21T22:03:31Z","object_id":{"id":1372,"is_a":["text","documentation","reference","template_tag"],"name":"doc_template_tag_tag_lib","title":"lib","uri":"https:\/\/zotonic.com\/id\/1372"},"seq":1000000}],"predicate":{"id":2409,"is_a":["meta","predicate"],"name":"refers","title":{"_type":"trans","tr":{"en":"Refers"}},"uri":"https:\/\/zotonic.com\/id\/refers"}},"subject":{"objects":[{"created":"2026-09-09T13:48:07Z","object_id":{"id":2555,"is_a":["categorization","keyword","keyword_information_type"],"name":"zotonic_topic_reference","title":"Reference","uri":"https:\/\/zotonic.com\/id\/2555"},"seq":1},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2563,"is_a":["categorization","keyword","keyword_audience"],"name":"zotonic_topic_frontend_developer","title":"Frontend developer","uri":"https:\/\/zotonic.com\/id\/2563"},"seq":2},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2623,"is_a":["categorization","keyword","keyword_architecture"],"name":"zotonic_topic_scomp","title":"Server component","uri":"https:\/\/zotonic.com\/id\/2623"},"seq":3},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2641,"is_a":["categorization","keyword","keyword_task"],"name":"zotonic_topic_render","title":"Render","uri":"https:\/\/zotonic.com\/id\/2641"},"seq":4},{"created":"2026-09-09T13:48:07Z","object_id":{"id":2673,"is_a":["categorization","keyword","keyword_technology"],"name":"zotonic_topic_javascript","title":"JavaScript","uri":"https:\/\/zotonic.com\/id\/2673"},"seq":5}],"predicate":{"id":308,"is_a":["meta","predicate"],"name":"subject","title":{"_type":"trans","tr":{"en":"Keyword"}},"uri":"http:\/\/purl.org\/dc\/elements\/1.1\/subject"}}},"id":1301,"is_a":["text","documentation","reference","template_scomp"],"links":[{"rel":"self","target":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1301"},{"rel":"hub","target":"https:\/\/zotonic.com\/.zotonic\/websub"}],"medium":null,"medium_url":null,"name":"doc_template_scomp_scomp_script","page_url":{"en":"https:\/\/zotonic.com\/docs\/1301\/script","x-default":"https:\/\/zotonic.com\/docs\/1301\/script"},"preview_url":null,"resource":{"version":4136,"pivot_location_lat":null,"title":"script","is_authoritative":true,"body":"

Emit the JavaScript collected from template actions, wires, validators and javascript<\/code> blocks.<\/p>\n

Place one script<\/code> tag near the end of the page, after all content that generates JavaScript and normally just before <\/body><\/code>:<\/p>\n

{% javascript %}\n    initializePage();\n{% endjavascript %}\n\n{% script %}\n<\/body>\n<\/html>\n<\/code><\/pre>\n
In its default HTML format, the tag emits a <script><\/code> element with the page's CSP nonce and defines window.zotonicPageInit<\/code>. Zotonic's wired JavaScript calls this function during page initialization. Use the standard Cotonic head and wired JavaScript includes.<\/p>\n
Browser-server communication uses MQTT over WebSocket connections, managed by\nCotonic. The standard Cotonic head and wired JavaScript includes set up this\nconnection; the script<\/code> tag supplies the collected page initialization code.<\/p>\n
JavaScript collected after this tag is not included in that initialization script. Use a single script<\/code> tag per page and put all declarations that it must process before it.<\/p>\n
For example, the generated HTML has this structure (the nonce and function\ncontents depend on the page):<\/p>\n
<script type="text\/javascript" nonce="...">\n    z_script_nonce = '...';\n    window.zotonicPageInit = function() {\n        initializePage();\n        \/\/ Collected actions and standard page startup code.\n    };\n<\/script>\n<\/code><\/pre>\n
Options<\/h2>\n
Option<\/th>Default<\/th>Description<\/th><\/tr><\/thead>
nostartup<\/code><\/td>false<\/code><\/td>Omit the standard page startup code supplied by script-render observers, retaining collected actions and template JavaScript. Library flushing still occurs.<\/td><\/tr>
format<\/code><\/td>"html"<\/code><\/td>Choose "html"<\/code> for a script element, "js"<\/code> for JavaScript without the element, or "escapejs"<\/code> for an escaped JavaScript string.<\/td><\/tr><\/tbody><\/table>\n
With format="js"<\/code> or format="escapejs"<\/code>, pending libraries become browser-loader dependencies instead of HTML include elements. The generated JavaScript waits for them before running the collected initialization code. These formats require Zotonic's wired asset loader to be available in the receiving page.<\/p>\n
Flushing collected libraries<\/h2>\n
Before emitting the HTML initialization script, script<\/code> flushes all pending CSS and JavaScript declared with lib collect<\/code>:<\/p>\n
{% lib "css\/component.css" "js\/component.js" collect %}\n\n<div id="component">...<\/div>\n\n{% javascript %}\n    initializeComponent();\n{% endjavascript %}\n\n{% script %}\n<\/code><\/pre>\n
The collected library include elements appear before the initialization script. Their original options and order are preserved; only compatible adjacent groups combine. Duplicate tracking remains intact after the flush.<\/p>\n
For earlier or type-specific placement, use explicit lib flush tags:<\/p>\n
{% lib flush="css" %}\n{% lib flush="javascript" %}\n{% lib flush %}\n<\/code><\/pre>\n
"js"<\/code> is an alias for "javascript"<\/code>. Unlike an ordinary CSS-only or JavaScript-only lib tag, script<\/code> flushes both types. See tag#lib<\/code><\/a> for collection rules and option restrictions.<\/p>\n
Dynamic updates<\/h2>\n
Dynamic fragments normally do not need their own script<\/code> tag. Wired updates collect the fragment's libraries and JavaScript automatically. Missing libraries load before DOM insertion and widget initialization; collected template JavaScript runs after the DOM update.<\/p>\n
For template-model requests, use model\/template\/get\/render_with_assets\/<template><\/code> to obtain html<\/code>, libs<\/code> and javascript<\/code>, then pass the result to z_assets.apply(result, insertHtml)<\/code>. The insertion callback may return a promise; initialization waits for it to finish. The HTML-only render<\/code> endpoint does not return the separate initialization information.<\/p>\n
The lower-level z_template:render_to_iolist\/3<\/code> materializes HTML and returns collected script state in its updated context; it does not expand a script<\/code> placeholder into the page initialization element. Use the normal final page-output path to render that placeholder, or the asset-aware update API for dynamic fragments.<\/p>\n
See also tag#lib<\/code><\/a> and tag#javascript<\/code><\/a>.<\/p>","slug":"script","is_protected":false,"visible_for":0,"tz":"UTC","language":["en"],"doc_source_hash":"87122a14b3c8ac8b4336197b2f3ec5f194b9b5d3e4130bea5947e77ce0b17b29","is_featured":false,"content_group_id":{"id":2551,"is_a":["meta","content_group"],"name":"content_group_imported_docs","title":"Imported documentation","uri":"https:\/\/zotonic.com\/id\/content_group_imported_docs"},"category_id":{"id":327,"is_a":["meta","category"],"name":"template_scomp","title":"Scomp","uri":"https:\/\/zotonic.com\/id\/template_scomp"},"doc_source_path":"apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_script.erl","publication_start":"2023-06-24T08:18:02Z","github_url":"https:\/\/github.com\/zotonic\/zotonic\/blob\/master\/apps\/zotonic_mod_wires\/src\/scomps\/scomp_wires_script.erl","pivot_location_lng":null,"doc_source_kind":"scomp","name":"doc_template_scomp_scomp_script","is_unfindable":false,"is_published":true,"pivot_geocode":null,"created":"2020-05-30T05:47:17Z","uri":null,"doc_status":"current","is_dependent":false,"erlang_app":"zotonic_mod_wires","publication_end":"9999-06-01T00:00:00Z","modifier_id":{"id":1,"is_a":["person"],"name":"administrator","title":"Site Administrator","uri":"https:\/\/zotonic.com\/id\/1"},"privacy":0,"doc_source_commit":"becf161621dcc4de964bbf083a88aff6d3ab21ae\n","erlang_module":"scomp_wires_script","creator_id":{"id":336,"is_a":["person","robot"],"name":"gitbot","title":"Git","uri":"https:\/\/zotonic.com\/id\/336"},"modified":"2026-11-05T18:42:58Z","title_slug":"script"},"uri":"https:\/\/zotonic.com\/id\/1301","uri_template":"https:\/\/zotonic.com\/id\/:id","websub":{"hub":"https:\/\/zotonic.com\/.zotonic\/websub","topic":"https:\/\/zotonic.com\/.zotonic\/websub\/topic\/1301"}},"status":"ok"}