1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Usage | pywebview</title>
<meta name="generator" content="VuePress 1.9.7">
<meta name="description" content="Build GUI for your Python program with JavaScript, HTML, and CSS">
<link rel="preload" href="/3.7/assets/css/0.styles.28a501df.css" as="style"><link rel="preload" href="/3.7/assets/js/app.10a559eb.js" as="script"><link rel="preload" href="/3.7/assets/js/2.0ff7ef1d.js" as="script"><link rel="preload" href="/3.7/assets/js/63.807edde1.js" as="script"><link rel="prefetch" href="/3.7/assets/js/10.f125ec08.js"><link rel="prefetch" href="/3.7/assets/js/11.81fead78.js"><link rel="prefetch" href="/3.7/assets/js/12.0a86c191.js"><link rel="prefetch" href="/3.7/assets/js/13.c09145fc.js"><link rel="prefetch" href="/3.7/assets/js/14.2a7dc35b.js"><link rel="prefetch" href="/3.7/assets/js/15.90c9f36a.js"><link rel="prefetch" href="/3.7/assets/js/16.69b1f4b4.js"><link rel="prefetch" href="/3.7/assets/js/17.956ed884.js"><link rel="prefetch" href="/3.7/assets/js/18.bd6678a0.js"><link rel="prefetch" href="/3.7/assets/js/19.b31e62b7.js"><link rel="prefetch" href="/3.7/assets/js/20.cebc4a71.js"><link rel="prefetch" href="/3.7/assets/js/21.d2041966.js"><link rel="prefetch" href="/3.7/assets/js/22.2a3916f2.js"><link rel="prefetch" href="/3.7/assets/js/23.712fbf84.js"><link rel="prefetch" href="/3.7/assets/js/24.f768e66b.js"><link rel="prefetch" href="/3.7/assets/js/25.69b3e415.js"><link rel="prefetch" href="/3.7/assets/js/26.6619f84a.js"><link rel="prefetch" href="/3.7/assets/js/27.e2a4e1bf.js"><link rel="prefetch" href="/3.7/assets/js/28.abcc819c.js"><link rel="prefetch" href="/3.7/assets/js/29.c379d080.js"><link rel="prefetch" href="/3.7/assets/js/3.749f6582.js"><link rel="prefetch" href="/3.7/assets/js/30.771e8640.js"><link rel="prefetch" href="/3.7/assets/js/31.547a8393.js"><link rel="prefetch" href="/3.7/assets/js/32.778a82c7.js"><link rel="prefetch" href="/3.7/assets/js/33.6ff70f11.js"><link rel="prefetch" href="/3.7/assets/js/34.ae1b5fb4.js"><link rel="prefetch" href="/3.7/assets/js/35.c5555b94.js"><link rel="prefetch" href="/3.7/assets/js/36.d53c471f.js"><link rel="prefetch" href="/3.7/assets/js/37.bbba2d58.js"><link rel="prefetch" href="/3.7/assets/js/38.5eb30036.js"><link rel="prefetch" href="/3.7/assets/js/39.8cac65fe.js"><link rel="prefetch" href="/3.7/assets/js/4.f2c64e71.js"><link rel="prefetch" href="/3.7/assets/js/40.53182a9c.js"><link rel="prefetch" href="/3.7/assets/js/41.19399765.js"><link rel="prefetch" href="/3.7/assets/js/42.41128068.js"><link rel="prefetch" href="/3.7/assets/js/43.660f3959.js"><link rel="prefetch" href="/3.7/assets/js/44.09d5c6f8.js"><link rel="prefetch" href="/3.7/assets/js/45.4a818eab.js"><link rel="prefetch" href="/3.7/assets/js/46.d1621897.js"><link rel="prefetch" href="/3.7/assets/js/47.7f8f8dec.js"><link rel="prefetch" href="/3.7/assets/js/48.f27d4c39.js"><link rel="prefetch" href="/3.7/assets/js/49.4189d401.js"><link rel="prefetch" href="/3.7/assets/js/5.2a771d7d.js"><link rel="prefetch" href="/3.7/assets/js/50.beff8380.js"><link rel="prefetch" href="/3.7/assets/js/51.8a918a6c.js"><link rel="prefetch" href="/3.7/assets/js/52.92d0105f.js"><link rel="prefetch" href="/3.7/assets/js/53.28701cde.js"><link rel="prefetch" href="/3.7/assets/js/54.2b15d6fb.js"><link rel="prefetch" href="/3.7/assets/js/55.d231c742.js"><link rel="prefetch" href="/3.7/assets/js/56.7e02bbff.js"><link rel="prefetch" href="/3.7/assets/js/57.61e9e46c.js"><link rel="prefetch" href="/3.7/assets/js/58.cc70e253.js"><link rel="prefetch" href="/3.7/assets/js/59.d3f412e7.js"><link rel="prefetch" href="/3.7/assets/js/6.64e1f3ed.js"><link rel="prefetch" href="/3.7/assets/js/60.f4fd7728.js"><link rel="prefetch" href="/3.7/assets/js/61.cd0f1d68.js"><link rel="prefetch" href="/3.7/assets/js/62.bf000bcc.js"><link rel="prefetch" href="/3.7/assets/js/64.2b6fe843.js"><link rel="prefetch" href="/3.7/assets/js/7.779cbcff.js"><link rel="prefetch" href="/3.7/assets/js/8.66fb3acb.js"><link rel="prefetch" href="/3.7/assets/js/9.84350af9.js">
<link rel="stylesheet" href="/3.7/assets/css/0.styles.28a501df.css">
</head>
<body>
<div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/3.7/" class="home-link router-link-active"><img src="/3.7/logo-no-text.png" alt="pywebview" class="logo"> <span class="site-name can-hide">pywebview</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/3.7/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/3.7/examples/" class="nav-link">
Examples
</a></div><div class="nav-item"><a href="/3.7/contributing/" class="nav-link">
Contributing
</a></div><div class="nav-item"><a href="/3.7/blog/" class="nav-link">
Blog
</a></div><div class="nav-item"><a href="/3.7/CHANGELOG.html" class="nav-link">
Changelog
</a></div> <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/3.7/guide/" class="nav-link router-link-active">
Guide
</a></div><div class="nav-item"><a href="/3.7/examples/" class="nav-link">
Examples
</a></div><div class="nav-item"><a href="/3.7/contributing/" class="nav-link">
Contributing
</a></div><div class="nav-item"><a href="/3.7/blog/" class="nav-link">
Blog
</a></div><div class="nav-item"><a href="/3.7/CHANGELOG.html" class="nav-link">
Changelog
</a></div> <a href="https://github.com/r0x0r/pywebview" target="_blank" rel="noopener noreferrer" class="repo-link">
GitHub
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav> <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Basics</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/3.7/guide/installation.html" class="sidebar-link">Installation</a></li><li><a href="/3.7/guide/usage.html" aria-current="page" class="active sidebar-link">Usage</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/3.7/guide/usage.html#basics" class="sidebar-link">Basics</a></li><li class="sidebar-sub-header"><a href="/3.7/guide/usage.html#http-server" class="sidebar-link">HTTP server</a></li><li class="sidebar-sub-header"><a href="/3.7/guide/usage.html#threading-model" class="sidebar-link">Threading model</a></li></ul></li></ul></section></li><li><section class="sidebar-group depth-0"><p class="sidebar-heading"><span>Development</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/3.7/guide/api.html" class="sidebar-link">API</a></li><li><a href="/3.7/guide/architecture.html" class="sidebar-link">Application architecture</a></li><li><a href="/3.7/guide/debugging.html" class="sidebar-link">Debugging</a></li><li><a href="/3.7/guide/interdomain.html" class="sidebar-link">Interdomain communication</a></li><li><a href="/3.7/guide/freezing.html" class="sidebar-link">Freezing</a></li><li><a href="/3.7/guide/security.html" class="sidebar-link">Security</a></li><li><a href="/3.7/guide/virtualenv.html" class="sidebar-link">Virtual environment</a></li><li><a href="/3.7/guide/renderer.html" class="sidebar-link">Web engine</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="usage"><a href="#usage" class="header-anchor">#</a> Usage</h1> <h2 id="basics"><a href="#basics" class="header-anchor">#</a> Basics</h2> <p>The bare minimum to get <em>pywebview</em> up and running is</p> <div class="language-python extra-class"><pre class="language-python"><code><span class="token keyword">import</span> webview
window <span class="token operator">=</span> webview<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">'Woah dude!'</span><span class="token punctuation">,</span> <span class="token string">'https://pywebview.flowrl.com'</span><span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>start<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>The <code>create_window</code> function returns a window instance that provides a number of both window manipulation and DOM related functions. You may create as many windows as you wish. Windows created after the GUI loop is started are shown immediately. All the opened windows are stored as a list in <code>webview.windows</code>. The windows are stored in a creation order.</p> <p>The <code>create_window</code> second argument <code>url</code> can point to a remote or a local path. Alternatively, you can load HTML by setting the <code>html</code> parameter.</p> <div class="language-python extra-class"><pre class="language-python"><code><span class="token keyword">import</span> webview
webview<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">'Woah dude!'</span><span class="token punctuation">,</span> html<span class="token operator">=</span><span class="token string">'<h1>Woah dude!<h1>'</span><span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>start<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><p>Note that if both <code>url</code> and <code>html</code> are set, <code>html</code> takes precedence.</p> <p><em>pywebview</em> gives a choice of several web renderers. To change a web renderer, set the <code>gui</code> parameter of the <code>start</code> function to the desired value (e.g <code>cef</code> or <code>qt</code>). See <a href="/3.7/guide/renderer.html">Renderer</a> for details.</p> <h2 id="http-server"><a href="#http-server" class="header-anchor">#</a> HTTP server</h2> <p><em>pywebview</em> provides a WSGI-compatible HTTP server. To start a HTTP server set the url to a local entry point (without a protocol schema) and set the <code>http_server</code> parameter of the <code>start</code> function to <code>True</code></p> <div class="language-python extra-class"><pre class="language-python"><code><span class="token keyword">import</span> webview
webview<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">'Woah dude!'</span><span class="token punctuation">,</span> <span class="token string">'index.html'</span><span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>start<span class="token punctuation">(</span>http_server<span class="token operator">=</span><span class="token boolean">True</span><span class="token punctuation">)</span>
</code></pre></div><p>If you wish to use an external WSGI compatible HTTP server with <em>pywebview</em>, you can pass a server object as an URL, ie. <code>http_server</code> parameter does not need to be set in this case.</p> <div class="language-python extra-class"><pre class="language-python"><code><span class="token keyword">from</span> flask <span class="token keyword">import</span> Flask
<span class="token keyword">import</span> webview
server <span class="token operator">=</span> Flask<span class="token punctuation">(</span>__name__<span class="token punctuation">,</span> static_folder<span class="token operator">=</span><span class="token string">'./assets'</span><span class="token punctuation">,</span> template_folder<span class="token operator">=</span><span class="token string">'./templates'</span><span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">'Flask example'</span><span class="token punctuation">,</span> server<span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>start<span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre></div><h2 id="threading-model"><a href="#threading-model" class="header-anchor">#</a> Threading model</h2> <p><code>webview.start</code> starts a GUI loop and is a blocking function. With the GUI loop being blocking, you must execute your backend logic in a separate thread or a process. You may launch a thread or a process manually. Alternatively you can execute your code by passing your function as the first parameter <code>func</code> to <code>start</code>. The second parameter sets the function's arguments. This approach starts a thread behind the scenes and is identical to starting a thread manually.</p> <div class="language-python extra-class"><pre class="language-python"><code><span class="token keyword">import</span> webview
<span class="token keyword">def</span> <span class="token function">custom_logic</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">:</span>
window<span class="token punctuation">.</span>toggle_fullscreen<span class="token punctuation">(</span><span class="token punctuation">)</span>
window<span class="token punctuation">.</span>evaluate_js<span class="token punctuation">(</span><span class="token string">'alert("Nice one brother")'</span><span class="token punctuation">)</span>
window <span class="token operator">=</span> webview<span class="token punctuation">.</span>create_window<span class="token punctuation">(</span><span class="token string">'Woah dude!'</span><span class="token punctuation">,</span> html<span class="token operator">=</span><span class="token string">'<h1>Woah dude!<h1>'</span><span class="token punctuation">)</span>
webview<span class="token punctuation">.</span>start<span class="token punctuation">(</span>custom_logic<span class="token punctuation">,</span> window<span class="token punctuation">)</span>
<span class="token comment"># anything below this line will be executed after program is finished executing</span>
<span class="token keyword">pass</span>
</code></pre></div><h1 id="make-python-and-javascript-talk-with-each-other"><a href="#make-python-and-javascript-talk-with-each-other" class="header-anchor">#</a> Make Python and Javascript talk with each other</h1> <p>You can think of custom logic as a backend that communicates with frontend code in the HTML/JS realm. Now how would you make two to communicate with each other? <em>pywebview</em> offers a two way JS-Python bridge that lets you both execute Javascript from Python (via <code>evaluate_js</code>) and Python code from Javascript (via <code>js_api</code> and <code>expose</code>). See <a href="/3.7/guide/interdomain.html">interdomain communication</a> for details. Another way is to run a Python web server (like Flask or Bottle) in custom logic and make frontend code make API calls to it. That would be identical to a typical web application. This approach is suitable, for example, for porting an existing web application to a desktop application. See <a href="/3.7/guide/architecture.html">Architecture</a> for more information on both approaches.</p></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/r0x0r/pywebview/edit/docs/docs/guide/usage.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
←
<a href="/3.7/guide/installation.html" class="prev">
Installation
</a></span> <span class="next"><a href="/3.7/guide/api.html">
API
</a>
→
</span></p></div> </main></div><div class="global-ui"></div></div>
<script src="/3.7/assets/js/app.10a559eb.js" defer></script><script src="/3.7/assets/js/2.0ff7ef1d.js" defer></script><script src="/3.7/assets/js/63.807edde1.js" defer></script>
</body>
</html>
|
