Deploy website - based on c4d9a93e56

2021-09-29 19:59:20 +00:00
parent 58796b7fe8
commit d22ebaa1a8
393 changed files with 786 additions and 786 deletions
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Debugging | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Debugging | NodeGui"><meta data-react-helmet="true" name="description" content="Application Debugging"><meta data-react-helmet="true" property="og:description" content="Application Debugging"><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/debugging"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/debugging"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -33,7 +33,7 @@ an external debugger will need to connect on this port. The default <code>port</
 <code>9229</code>.</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-shell codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">qode --inspect</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token number" style="color:rgb(247, 140, 108)">9229</span><span class="token plain"> your/app</span></div></div></div></div></div><h4><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="--inspect-brkport"></a><code>--inspect-brk=[port]</code><a aria-hidden="true" tabindex="-1" class="hash-link" href="#--inspect-brkport" title="Direct link to heading">#</a></h4><p>Like <code>--inspect</code> but pauses execution on the first line of JavaScript.</p><p><strong>Note</strong></p><p>If you are using the official boilerplate <code>nodegui-starter</code>, then you can achieve this by running</p><div class="mdxCodeBlock_1XEh"><div class="codeBlockContent_1u-d"><button type="button" aria-label="Copy code to clipboard" class="copyButton_10dd">Copy</button><div tabindex="0" class="prism-code language-undefined codeBlock_3iAC"><div class="codeBlockLines_b7E3" style="color:#bfc7d5;background-color:#292d3e"><div class="token-line" style="color:#bfc7d5"><span class="token plain">npm run debug</span></div></div></div></div></div><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="external-debuggers"></a>External Debuggers<a aria-hidden="true" tabindex="-1" class="hash-link" href="#external-debuggers" title="Direct link to heading">#</a></h3><p>You will need to use a debugger that supports the V8 inspector protocol.</p><ul><li>Connect Chrome by visiting <code>chrome://inspect</code> and selecting to inspect the
 launched NodeGui app present there.</li><li><a href="/docs/guides/debugging-in-vscode">Debugging the NodeGui app in VSCode</a></li></ul></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/debugging.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/nodegui-architecture"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Architecture</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/debugging-in-vscode"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Debugging in VSCode »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#application-debugging" class="table-of-contents__link">Application Debugging</a></li><li><a href="#debugging-qode-process" class="table-of-contents__link">Debugging Qode process</a><ul><li><a href="#command-line-switches" class="table-of-contents__link">Command Line Switches</a></li><li><a href="#external-debuggers" class="table-of-contents__link">External Debuggers</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Getting started | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Getting started | NodeGui"><meta data-react-helmet="true" name="description" content="NodeGui enables you to create desktop applications with JavaScript. You could see it"><meta data-react-helmet="true" property="og:description" content="NodeGui enables you to create desktop applications with JavaScript. You could see it"><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/getting-started"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/getting-started"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -52,7 +52,7 @@ virtually all code editors and IDEs these days support JavaScript.</p><h4><a ari
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">npm start</span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block">
 </span></div></div></div></div></div><p><strong>Note</strong>: If you encounter errors installing <code>nodegui</code>, please check the <a href="/docs/faq#why-does-installation-fail-at-minimal-qt-setup">FAQs</a> for additional help.</p><p>That&#x27;s it!</p><p>Congratulations! You&#x27;ve successfully run and modified your first NodeGui app.</p><h3><a aria-hidden="true" tabindex="-1" class="anchor enhancedAnchor_2cZh" id="now-what"></a>Now what?<a aria-hidden="true" tabindex="-1" class="hash-link" href="#now-what" title="Direct link to heading">#</a></h3><p>If you&#x27;re curious to learn more about NodeGui, continue on to the <a href="/docs/guides/tutorial">tutorial</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/getting-started.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/tutorial"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Learn the Basics »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#developer-environment" class="table-of-contents__link">Developer environment</a><ul><li><a href="#setting-up-on-macos" class="table-of-contents__link">Setting up on macOS</a></li><li><a href="#setting-up-on-windows" class="table-of-contents__link">Setting up on Windows</a></li><li><a href="#setting-up-on-linux" class="table-of-contents__link">Setting up on Linux</a></li><li><a href="#a-good-editor" class="table-of-contents__link">A Good Editor</a></li><li><a href="#hello-world" class="table-of-contents__link">Hello World</a></li><li><a href="#now-what" class="table-of-contents__link">Now what?</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Handle Events | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Handle Events | NodeGui"><meta data-react-helmet="true" name="description" content="NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a lineedit or even something like window being hidden and shown."><meta data-react-helmet="true" property="og:description" content="NodeGui allows you to listen to various events that might originate from the underlying Qt widgets. These events can either be a simple button click or a text change on a lineedit or even something like window being hidden and shown."><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/handle-events"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/handle-events"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -35,7 +35,7 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">win</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">setCentralWidget</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">label</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">win</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token method function property-access" style="color:rgb(130, 170, 255)">show</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span></div><div class="token-line" style="color:#bfc7d5"><span class="token plain">global</span><span class="token punctuation" style="color:rgb(199, 146, 234)">.</span><span class="token property-access">win</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> win</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></div></div></div></div><img src="https://github.com/nodegui/nodegui/releases/download/assets/mouseevent.gif" alt="mouse event listener" style="width:100%;max-width:400px"><p>Note here that every QEvent handler gives a reference to native QEvent in the handler callback.
 Not all native QEvent wrappers are implemented yet and we might need your help regarding those. Feel free to jump in and contribute to the nodegui core.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/handle-events.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/layout"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Layout</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/scroll-view"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Scroll Area »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#event-handling" class="table-of-contents__link">Event handling</a><ul><li><a href="#how-do-i-know-which-events-are-supported-" class="table-of-contents__link">How do I know which events are supported ?</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Architecture | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Architecture | NodeGui"><meta data-react-helmet="true" name="description" content="By looking at how NodeGui works internally, we would get a clear picture on why the APIs are designed the way they are."><meta data-react-helmet="true" property="og:description" content="By looking at how NodeGui works internally, we would get a clear picture on why the APIs are designed the way they are."><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/nodegui-architecture"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/nodegui-architecture"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -43,7 +43,7 @@ compiled with Qode or a compatible Node version to be used with NodeGui.</p><p>T
 ~650.000 modules are native. However, if you do need native modules, please
 consult <a href="/docs/guides/using-native-node-modules">this guide on how to recompile them for NodeGui</a>.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/nodegui-architecture.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/helpful-links"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Helpful links</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/debugging"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Debugging »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#qode" class="table-of-contents__link">Qode</a></li><li><a href="#using-nodegui-apis" class="table-of-contents__link">Using NodeGui APIs</a></li><li><a href="#using-nodejs-apis" class="table-of-contents__link">Using Nodejs APIs</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Scroll Area | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Scroll Area | NodeGui"><meta data-react-helmet="true" name="description" content="ScrollArea allows you to display a large content (image, list or even plain text) in an area of predefined size. A scroll area is used to display the contents of a child widget within a frame. If the widget exceeds the size of the frame, the view can provide scroll bars so that the entire area of the child widget can be viewed."><meta data-react-helmet="true" property="og:description" content="ScrollArea allows you to display a large content (image, list or even plain text) in an area of predefined size. A scroll area is used to display the contents of a child widget within a frame. If the widget exceeds the size of the frame, the view can provide scroll bars so that the entire area of the child widget can be viewed."><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/scroll-view"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/scroll-view"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -34,7 +34,7 @@
 </span></div><div class="token-line" style="color:#bfc7d5"><span class="token template-string string" style="color:rgb(195, 232, 141)"></span><span class="token template-string template-punctuation string" style="color:rgb(195, 232, 141)">`</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span></div></div></div></div></div><p><strong>TLDR;</strong></p><p>We create a QScrollArea instance and use the setWidget method to insert a widget as its child.
 QScrollArea can take any widget as its child.</p><p>The result would look like this:</p><img src="https://github.com/nodegui/nodegui/releases/download/assets/scrollarea.gif" alt="scroll area" style="width:100%;max-width:400px"></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/scroll-view.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/handle-events"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Handle Events</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/images"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Images »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#example" class="table-of-contents__link">Example</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Learn the Basics | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Learn the Basics | NodeGui"><meta data-react-helmet="true" name="description" content="NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a NodeGui app, you need to be familiar with Javascript or Typescript. This tutorial is aimed at everyone who has some web experience with web development."><meta data-react-helmet="true" property="og:description" content="NodeGui uses native components instead of web based components as building blocks. So to understand the basic structure of a NodeGui app, you need to be familiar with Javascript or Typescript. This tutorial is aimed at everyone who has some web experience with web development."><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/tutorial"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/tutorial"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -36,7 +36,7 @@ application might encounter.</p><h2><a aria-hidden="true" tabindex="-1" class="a
 You can take a look at the list of native widgets that NodeGui currently supports here : <a href="/docs/api/generated/classes/qwidget">Native widgets in NodeGui</a>.
 With time more widgets and APIs will be added to NodeGui. Apart from modules in NodeGui, you also have access to the entire node modules ecosystem. Thus, any node module that you can use with Node.js, can be used with NodeGui. This makes it extremely powerful.</p><p>Fine, I want something more custom and beautiful than just native looking widgets. What do I do?</p><p>To make things more beautiful, you will have to <a href="/docs/guides/styling">learn about styling</a>. Lets take a look at that next.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/tutorial.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/getting-started"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Getting started</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/styling"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Styling »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#nodegui-development-in-a-nutshell" class="table-of-contents__link">NodeGui development in a nutshell</a></li><li><a href="#whats-going-on-here" class="table-of-contents__link">What&#39;s going on here?</a></li><li><a href="#trying-out-the-starter-project" class="table-of-contents__link">Trying out the starter project</a></li><li><a href="#what-else-other-than-a-basic-window" class="table-of-contents__link">What else other than a basic window?</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>
@@ -9,7 +9,7 @@
 <script async src="https://www.google-analytics.com/analytics.js"></script>
 <link rel="search" type="application/opensearchdescription+xml" title="NodeGui" href="/opensearch.xml"><title data-react-helmet="true">Using native Node Modules | NodeGui</title><meta data-react-helmet="true" name="docsearch:version" content="current,latest"><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:title" content="Using native Node Modules | NodeGui"><meta data-react-helmet="true" name="description" content="Native Node modules are supported by NodeGui, but since NodeGui is very"><meta data-react-helmet="true" property="og:description" content="Native Node modules are supported by NodeGui, but since NodeGui is very"><meta data-react-helmet="true" property="og:url" content="https://nodegui.org/docs/guides/using-native-node-modules"><link data-react-helmet="true" rel="shortcut icon" href="/img/favicon.ico"><link data-react-helmet="true" rel="preconnect" href="https://BH4D9OD16A-dsn.algolia.net" crossorigin="true"><link data-react-helmet="true" rel="canonical" href="https://nodegui.org/docs/guides/using-native-node-modules"><link rel="stylesheet" href="/styles.920797bd.css">
 <link rel="preload" href="/styles.c64f7c7d.js" as="script">
-<link rel="preload" href="/runtime~main.a2f4166b.js" as="script">
+<link rel="preload" href="/runtime~main.c21699a1.js" as="script">
 <link rel="preload" href="/main.d30558ed.js" as="script">
 <link rel="preload" href="/1.c3df9058.js" as="script">
 <link rel="preload" href="/2.73955132.js" as="script">
@@ -35,7 +35,7 @@ a newer version of V8 than Node and/or there are ABI changes, bad things may
 happen. So in general, it is recommended to always build native modules from
 source code.</p></div></article><div class="margin-vert--xl"><div class="row"><div class="col"><a href="https://github.com/nodegui/nodegui/edit/master/website/docs/guides/using-native-node-modules.md" target="_blank" rel="noreferrer noopener"><svg fill="currentColor" height="1.2em" width="1.2em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 40 40" style="margin-right:0.3em;vertical-align:sub"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div></div></div><div class="margin-vert--lg"><nav class="pagination-nav" aria-label="Blog list page navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/guides/debugging-in-vscode"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">« Debugging in VSCode</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/guides/custom-nodegui-native-plugin"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Custom NodeGui Plugin »</div></a></div></nav></div></div></div><div class="col col--3"><div class="tableOfContents_3SO_"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#how-to-install-native-modules" class="table-of-contents__link">How to install native modules</a></li><li><a href="#troubleshooting" class="table-of-contents__link">Troubleshooting</a></li><li><a href="#modules-that-rely-on-node-pre-gyp" class="table-of-contents__link">Modules that rely on <code>node-pre-gyp</code></a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container"><div class="row footer__links"><div class="col footer__col"><h4 class="footer__title">Docs</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/docs/guides/getting-started">Getting Started</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/api/manual/synopsis">API</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">Community</h4><ul class="footer__items"><li class="footer__item"><a href="https://spectrum.chat/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Spectrum</a></li><li class="footer__item"><a href="https://nodegui.slack.com" target="_blank" rel="noopener noreferrer" class="footer__link-item">Slack</a></li><li class="footer__item"><a href="https://twitter.com/node_gui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter</a></li><li class="footer__item"><a href="https://medium.com/nodegui" target="_blank" rel="noopener noreferrer" class="footer__link-item">Medium</a></li></ul></div><div class="col footer__col"><h4 class="footer__title">More</h4><ul class="footer__items"><li class="footer__item"><a class="footer__link-item" href="/blog">Blog</a></li><li class="footer__item"><a href="https://react.nodegui.org" target="_blank" rel="noopener noreferrer" class="footer__link-item">React NodeGui</a></li><li class="footer__item"><a class="footer__link-item" href="/docs/faq">FAQ</a></li></ul></div></div><div class="text--center"><div>Copyright © 2021 NodeGui</div></div></div></footer></div>
 <script src="/styles.c64f7c7d.js"></script>
-<script src="/runtime~main.a2f4166b.js"></script>
+<script src="/runtime~main.c21699a1.js"></script>
 <script src="/main.d30558ed.js"></script>
 <script src="/1.c3df9058.js"></script>
 <script src="/2.73955132.js"></script>