SALT-NLP/Design2Code-HARD
This dataset consists of 80 extra difficult webpages from Github Pages, which challenges SoTA multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the "easy" version of the Design2Code testset here Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information.
6379
1<!DOCTYPE html>2<html itemscope itemtype="" lang="en">3 <head>4 <style>5 html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}*,*:before,*:after{box-sizing:border-box}body{background:#03a9f4;padding:0px 8px;font-family:"Roboto",sans-serif}h1,h2,h3,h4,h5,h6{font-family:"PT Sans",sans-serif;font-weight:normal}h1{margin:24px 0px;font-size:32px}h2{margin:26px 0px;font-size:24px}h3{margin:20px 0px;font-size:20px}hr{background:#000;border:0px solid #000;border-top-width:1px;margin:15px 0px}p{margin:14px 0px 5px 0px}ul{display:block;margin:3px 0px 10px 0px;list-style-type:disc}li{margin:0px 0px 0px 40px;line-height:1.3}textarea{font-family:monospace}[v-cloak]{display:none}.container{max-width:1450px;background-color:#fff;background-image:url("../_imgs/xpda-top-bar.png");background-position:0px -60px;background-repeat:no-repeat;background-size:100% 127px;border-radius:35px 35px 9px 9px;margin:10px auto 40px auto;padding:10px}.full{width:100%}.half{display:inline-block;width:49%;vertical-align:top}.btn{background:#EAEAEA;border:1px solid #000;border-width:1px 0px;margin:4px 0px;padding:8px;font-size:14px;cursor:pointer}.btn:hover,.btn:focus{background:#fff;border-color:#bdbdbd;outline:none}.btn:first-of-type{border-left-width:1px}.btn:last-of-type{border-right-width:1px}.btn.active{background:#03a9f4}.btn.active:hover,.btn.active:focus{background:#81d4fa;border-color:#03a9f4}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.center{margin-right:auto;margin-left:auto;text-align:center}.section{margin-bottom:10px}.form{columns:2}.form>div{margin:10px 0px}.form label{font-weight:bold}.form textarea,.form input[type="text"]{width:500px}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.spinner{width:120px;height:120px;border:16px solid #DDD;border-top-color:#03a9f4;border-radius:50%;margin:30px auto;animation:spin 2s linear infinite}@keyframes spin{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}.cards{margin-right:auto;margin-left:auto;text-align:center;font-size:0px}.card,.card-spacer{display:inline-block;width:calc(100% - 22px);max-width:695px;margin:10px;font-size:16px}.card{border:1px solid #000;line-height:1.2;text-align:left}.unreviewed .card-header{background:#f50057}.card-header{background:#03a9f4;padding:0px 11px;color:#fff;font-family:"PT Sans Narrow","Roboto",sans-serif;font-size:22px;font-weight:700;line-height:48px}.card-header a,.card-header a:visited{color:#fff}.card-body{height:300px;padding:10px;overflow:auto}.deprecated .card-header{background:#D8D8D8;border-color:#D8D8D8}.deprecated .card-header a,.deprecated .card-header a:visited{color:#616161}.deprecated .card-body{background:#EAEAEA}.deprecated .expand svg,.deprecated .shrink svg{fill:#616161}.expand,.shrink{cursor:pointer;float:right}.expand svg,.shrink svg{fill:#fff}.shrink{display:none}.big-card .card{max-width:100%}.big-card .card-body{height:630px}.big-card .shrink{display:block}.big-card .expand{display:none}.news p{max-width:850px;margin:0px auto;line-height:1.15;text-align:left}.news-controls{padding-top:10px}.news-link{color:blue;cursor:pointer}.github-corner p{display:none}.github-corner svg{position:absolute;top:0px;right:0px;width:80px;height:80px;border:0px;fill:#fff;filter:drop-shadow(-7px 7px 0px #03a9f4)}.github-corner .octo-body{fill:#03a9f4}.github-corner .octo-arm{fill:#03a9f4;transform-origin:130px 106px}.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0deg)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width: 500px){.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}.github-corner:hover .octo-arm{animation:none}}@media (max-width: 320px){.github-corner svg{display:none}.github-corner p{display:block}}.wordmark{max-width:calc(100% - 10px);max-height:79px;margin:59px 0px 13px 0px}.logo{max-width:100px;max-height:100px;margin:0px 0px 13px 13px;float:right}.admin-preview{width:100%;height:348px;background:#f5f5f5;border:0px;margin:10px 0px;overflow-y:scroll}.plus,.minus{background:#eee;padding:1px 7px;cursor:pointer;vertical-align:top}@media screen and (max-width: 1230px){.form{columns:1}.half{width:100%}}6 7 8 9 </style>10 <!-- Global -->11 <meta charset="utf-8">12 <meta content="IE=edge" http-equiv="X-UA-Compatible">13 <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">14 <title>15 Cross-Platform Desktop App Development (XPDA)16 </title>17 <meta content="A comprehensive list of tools used to make cross-platform desktop apps (XPDA). Including pros/cons, and a variety of programming language support." name="description">18 <meta content="xpda, cross-platform, dekstop app, development, devtools" name="keywords">19 <meta content="0" http-equiv="Expires">20 <meta content="Desktop App Development" name="subject">21 <meta content="EN" name="language">22 <meta content="index,follow" name="robots">23 <meta content="The Jared Wilcurt" name="owner">24 <meta content="General" name="rating">25 <meta content="True" name="HandheldFriendly">26 <!-- Google/Schema.org -->27 <meta content="XPDA: Cross-Platform Desktop App Development" itemprop="name">28 <meta content="A comprehensive list of tools used to make cross-platform desktop apps (XPDA). Including pros/cons, and a variety of programming language support." itemprop="description">29 <meta content="" itemprop="image">30 <!-- Twitter -->31 <meta content="on" name="twitter:dnt">32 <meta content="summary" name="twitter:card">33 <meta content="@TheJaredwilcurt" name="twitter:creator">34 <!-- Facebook/Reddit -->35 <meta content="website" property="og:type">36 <meta content="" property="og:url">37 <meta content="XPDA: Cross-Platform Desktop App Development" property="og:title">38 <meta content="XPDA: Cross-Platform Desktop App Development" property="og:site_name">39 <meta content="" property="og:image">40 <meta content="en_US" property="og:locale">41 <meta content="A comprehensive list of tools used to make cross-platform desktop apps (XPDA). Including pros/cons, and a variety of programming language support." property="og:description">42 <!-- Android -->43 <meta content="#03A9F4" name="theme-color">44 <meta content="yes" name="mobile-web-app-capable">45 <!-- Microsoft -->46 <meta content="XPDA.net" name="application-name">47 <meta content="on" http-equiv="cleartype">48 <meta content="#FFFFFF" name="msapplication-navbutton-color">49 <meta content="#FFFFFF" name="msapplication-TileColor">50 <meta content="/_imgs/meta/mstile01sm.png" name="msapplication-square70x70logo">51 <meta content="/_imgs/meta/mstile02md.png" name="msapplication-square150x150logo">52 <meta content="/_imgs/meta/mstile03wd.png" name="msapplication-wide310x150logo">53 <meta content="/_imgs/meta/mstile04lg.png" name="msapplication-square310x310logo">54 <meta content="skype_toolbar_parser_compatible" name="skype_toolbar">55 <!-- Apple -->56 <meta content="XPDA.net" name="apple-mobile-web-app-title">57 <meta content="no" name="apple-mobile-web-app-capable">58 <meta content="no" name="apple-touch-fullscreen">59 <meta content="black" name="apple-mobile-web-app-status-bar-style">60 <meta content="telephone=no" name="format-detection">61 <!-- Styles/Scripts -->62 </head>63 <body>64 <div class="container text-center" data-v-app id="app">65 <a class="github-corner" title="Edit this page on GitHub">66 <p>67 Edit this page on GitHub68 </p>69 </a>70 <div>71 <a>72 <img alt="XPDA.net" class="wordmark" src="rick.jpg">73 </a>74 </div>75 <h2>76 Cross-Platform Desktop Apps (XPDA)77 </h2>78 <h3>79 Write Once Run Anywhere (WORA) development for desktop operating systems.80 </h3>81 <hr>82 <div class="news">83 <h2>84 XPDA News: (8/26/2020)85 </h2>86 <h3>87 <a rel="nofollow" target="_blank">88 Electron drops ESM support89 </a>90 </h3>91 <p>92 <strong>93 Summary:94 </strong>95 <span>96 Electron has stated that it will be dropping support for JavaScript's modern, native, import/export. The popular97 <code>98 import module from './module.js'99 </code>100 pattern will be removed from Electron.101 </span>102 (103 <a rel="nofollow" target="_blank">104 Read more105 </a>106 )107 </p>108 <div class="news-controls">109 «110 <span class="">111 Next Story112 </span>113 |114 <span class="news-link">115 Previous story116 </span>117 »118 </div>119 </div>120 <hr>121 <!-- -->122 <div class="text-left">123 <h3>124 Filter Controls:125 </h3>126 <div>127 <select>128 <option value="subtractive">129 Supports at least one of these:130 </option>131 <option value="additive">132 Must support each selected:133 </option>134 </select>135 </div>136 <div>137 <p>138 Languages139 </p>140 <button class="active btn" title="Used by 15 tools">141 HTML142 </button>143 <button class="active btn" title="Used by 15 tools">144 JS145 </button>146 <button class="active btn" title="Used by 14 tools">147 CSS148 </button>149 <button class="active btn" title="Used by 8 tools">150 Node.js151 </button>152 <button class="active btn" title="Used by 5 tools">153 C++154 </button>155 <button class="active btn" title="Used by 4 tools">156 Python157 </button>158 <button class="active btn" title="Used by 3 tools">159 C#160 </button>161 <button class="active btn" title="Used by 3 tools">162 .NET163 </button>164 <button class="active btn" title="Used by 2 tools">165 Rust166 </button>167 <button class="active btn" title="Used by 2 tools">168 Go169 </button>170 <button class="active btn" title="Used by 2 tools">171 ActionScript172 </button>173 <button class="active btn" title="Used by 2 tools">174 C175 </button>176 <button class="active btn" title="Used by 2 tools">177 Perl178 </button>179 <button class="active btn" title="Used by 2 tools">180 Ruby181 </button>182 <button class="active btn" title="Used by 1 tools">183 F#184 </button>185 <button class="active btn" title="Used by 1 tools">186 Lisp187 </button>188 <button class="active btn" title="Used by 1 tools">189 D190 </button>191 <button class="active btn" title="Used by 1 tools">192 Haskell193 </button>194 <button class="active btn" title="Used by 1 tools">195 Kotlin196 </button>197 <button class="active btn" title="Used by 1 tools">198 Lua199 </button>200 <button class="active btn" title="Used by 1 tools">201 PHP202 </button>203 <button class="active btn" title="Used by 1 tools">204 Scala205 </button>206 <button class="active btn" title="Used by 1 tools">207 Swift208 </button>209 <button class="active btn" title="Used by 1 tools">210 TIScript211 </button>212 <button class="active btn" title="Used by 1 tools">213 Xojo214 </button>215 <button class="active btn" title="Used by 1 tools">216 Java217 </button>218 <button class="active btn" title="Used by 1 tools">219 Scheme220 </button>221 <button class="active btn" title="Used by 1 tools">222 ReasonML223 </button>224 <button class="active btn" title="Used by 1 tools">225 OCaml226 </button>227 <button class="active btn" title="Used by 1 tools">228 8th229 </button>230 <button class="active btn" title="Used by 1 tools">231 XML232 </button>233 </div>234 <div>235 <p>236 Platforms237 </p>238 <button class="active btn" title="Used by 29 tools">239 Windows240 </button>241 <button class="active btn" title="Used by 29 tools">242 OSX243 </button>244 <button class="active btn" title="Used by 26 tools">245 Linux246 </button>247 <button class="active btn" title="Used by 9 tools">248 iOS249 </button>250 <button class="active btn" title="Used by 8 tools">251 Android252 </button>253 <button class="active btn" title="Used by 2 tools">254 Windows Phone255 </button>256 </div>257 <!-- -->258 <!-- -->259 <h3>260 Matching Tools (29/29)261 </h3>262 <div class="cards">263 <div class="card">264 <div class="card-header">265 <a rel="noopener noreferrer" target="_blank">266 NW.js267 </a>268 <span class="expand">269 </span>270 <span class="shrink">271 </span>272 </div>273 <div class="card-body">274 <a rel="noopener noreferrer" target="_blank">275 <img alt="NW.js logo" class="logo" src="rick.jpg">276 </a>277 <div class="section">278 <strong>279 Languages:280 </strong>281 HTML, CSS, JS, Node.js282 </div>283 <div class="section">284 <strong>285 Supported platforms:286 </strong>287 Windows, Linux, OSX288 </div>289 <div class="section">290 <strong>291 Pros:292 </strong>293 <ul>294 <li>295 Very wide OS support (about twice as many OS's as Electron)296 </li>297 <li>298 Legacy OS support to OSX 10.6 and XP (via NW.js 0.14.7 LTS)299 </li>300 <li>301 Actually cares about proper Linux support302 </li>303 <li>304 Allows for protected source code (important for proprietary/closed source code)305 </li>306 </ul>307 </div>308 <div class="section">309 <strong>310 Cons:311 </strong>312 <ul>313 <li>314 Terrible Name/Branding/Marketing315 </li>316 <li>317 Small-Medium ecosystem318 </li>319 <li>320 Basically one person behind most of the code321 </li>322 <li>323 Everything you need from the documentation is available, but the site is clunky324 </li>325 </ul>326 </div>327 <div>328 <strong>329 Notable Projects made with NW.js:330 </strong>331 <ul>332 <li>333 <a rel="noopener noreferrer" target="_blank">334 Construct335 </a>336 - Used under the hood for tens of thousands of games created using the Construct game dev toolkit.337 </li>338 <li>339 <a rel="noopener noreferrer" target="_blank">340 WeChat Mini Program SDK341 </a>342 - WeChat Mini Program SDK is built with NW.js.343 </li>344 <li>345 <a rel="noopener noreferrer" target="_blank">346 pgAdmin 4347 </a>348 - A very popular database tool, pgAdmin switched to NW.js in 2021 saying "By implementing the Desktop Runtime using NW.js we get rid of the separate server application and the independent browser. We also get rid of QT and C++ runtime logic".349 </li>350 <li>351 <a rel="noopener noreferrer" target="_blank">352 Gitter353 </a>354 - Gitter is a chat platform for open source projects that directly integrates with GitHub. The native Windows desktop app for it uses NW.js.355 </li>356 </ul>357 </div>358 <div class="section">359 <strong>360 Frameworks:361 </strong>362 <ul>363 <li>364 Vue -365 <a rel="noopener noreferrer" target="_blank">366 Vue-CLI + NW.js367 </a>368 </li>369 <li>370 Angular 8+ -371 <a rel="noopener noreferrer" target="_blank">372 Angular CLI + NW.js373 </a>374 </li>375 <li>376 More available at -377 <a rel="noopener noreferrer" target="_blank">378 NW Utils379 </a>380 </li>381 </ul>382 </div>383 <!-- -->384 <div class="section">385 <strong>386 Tutorials:387 </strong>388 <ul>389 <li>390 <strong>391 dev.to392 </strong>393 -394 <a rel="noopener noreferrer" target="_blank">395 Holy shit NW.js is so easy396 </a>397 <em>398 by The Jared Wilcurt399 </em>400 </li>401 <li>402 <strong>403 YouTube404 </strong>405 -406 <a rel="noopener noreferrer" target="_blank">407 NW.js, Vue, Vuetify408 </a>409 <em>410 by Ackzell411 </em>412 </li>413 <li>414 <strong>415 GitLab416 </strong>417 -418 <a rel="noopener noreferrer" target="_blank">419 Making a desktop app: For complete beginners420 </a>421 <em>422 by The Jared Wilcurt423 </em>424 </li>425 <li>426 <strong>427 GitHub428 </strong>429 -430 <a rel="noopener noreferrer" target="_blank">431 Packaging and distributing NW.js apps432 </a>433 <em>434 by Wouter Hisschemöller435 </em>436 </li>437 </ul>438 </div>439 </div>440 </div>441 <div class="card">442 <div class="card-header">443 <a rel="noopener noreferrer" target="_blank">444 Electron445 </a>446 <span class="expand">447 </span>448 <span class="shrink">449 </span>450 </div>451 <div class="card-body">452 <a rel="noopener noreferrer" target="_blank">453 <img alt="Electron logo" class="logo" src="rick.jpg">454 </a>455 <div class="section">456 <strong>457 Languages:458 </strong>459 HTML, CSS, JS, Node.js460 </div>461 <div class="section">462 <strong>463 Supported platforms:464 </strong>465 Windows, Linux, OSX466 </div>467 <div class="section">468 <strong>469 Pros:470 </strong>471 <ul>472 <li>473 Great name/marketing/branding474 </li>475 <li>476 Big ecosystem477 </li>478 <li>479 Good documentation480 </li>481 <li>482 Used by a few big name projects483 </li>484 </ul>485 </div>486 <div class="section">487 <strong>488 Cons:489 </strong>490 <ul>491 <li>492 Basically one person behind most of the code493 </li>494 <li>495 Doesn't take Linux support seriously496 </li>497 <li>498 Does not support any legacy OS's499 </li>500 <li>501 Resource Hog502 </li>503 </ul>504 </div>505 <div>506 <strong>507 Notable Projects made with Electron:508 </strong>509 <ul>510 <li>511 <a rel="noopener noreferrer" target="_blank">512 Discord513 </a>514 - Chat application aimed primarily at gamers515 </li>516 <li>517 <a rel="noopener noreferrer" target="_blank">518 VSCode519 </a>520 - Open source text editor from Microsoft aimed at web developers.521 </li>522 <li>523 <a rel="noopener noreferrer" target="_blank">524 Slack525 </a>526 - Slack is a chat application primarily aimed at inter-office and work-team communication.527 </li>528 <li>529 <a rel="noopener noreferrer" target="_blank">530 List of apps submitted to the Electron Website531 </a>532 - User submitted apps made with Electron533 </li>534 <!-- -->535 </ul>536 </div>537 <div class="section">538 <strong>539 Frameworks:540 </strong>541 <ul>542 <li>543 Vue (Vue-CLI 2) -544 <a rel="noopener noreferrer" target="_blank">545 Electron-Vue546 </a>547 </li>548 <li>549 Vue (Vue-CLI 3) -550 <a rel="noopener noreferrer" target="_blank">551 Vue-CLI Plugin Electron Builder552 </a>553 </li>554 </ul>555 </div>556 <!-- -->557 <div class="section">558 <strong>559 Tutorials:560 </strong>561 <ul>562 <li>563 <strong>564 dev.to565 </strong>566 -567 <a rel="noopener noreferrer" target="_blank">568 Building a Desktop App with Vue: Electron569 </a>570 <em>571 by Natalia Tepluhina572 </em>573 </li>574 <li>575 <strong>576 YouTube577 </strong>578 -579 <a rel="noopener noreferrer" target="_blank">580 Login UI with Vuetify581 </a>582 <em>583 by Paris Nakita Kejser584 </em>585 </li>586 <li>587 <strong>588 QVault589 </strong>590 -591 <a rel="noopener noreferrer" target="_blank">592 Automatic Cross-Platform Deployments with Electron and Travis-CI593 </a>594 <em>595 by Lane Wagner596 </em>597 </li>598 </ul>599 </div>600 </div>601 </div>602 <div class="card">603 <div class="card-header">604 <a rel="noopener noreferrer" target="_blank">605 Tauri606 </a>607 <span class="expand">608 </span>609 <span class="shrink">610 </span>611 </div>612 <div class="card-body">613 <a rel="noopener noreferrer" target="_blank">614 <img alt="Tauri logo" class="logo" src="rick.jpg">615 </a>616 <div class="section">617 <strong>618 Languages:619 </strong>620 HTML, CSS, JS, Rust621 </div>622 <div class="section">623 <strong>624 Supported platforms:625 </strong>626 Windows, Linux, OSX627 </div>628 <div class="section">629 <strong>630 Pros:631 </strong>632 <ul>633 <li>634 Once you have all the prerequisites installed, the initial project creation is extremely polished. A single command starts up a new project, which integrates with all popular WebDev CLI's (Vite, Vue-CLI, CRA, etc)635 </li>636 <li>637 Has a build tool built right in. It's slow, but a phenomenal feature to have officially maintained638 </li>639 <li>640 The documentation is probably the best I've seen for any project listed on XPDA.net. Though I found a few of my questions unanswered as I used it, especially basic things like what OS's are supported.641 </li>642 <li>643 Produced a self-contained, portable, Windows executable that was under 7MB644 </li>645 </ul>646 </div>647 <div class="section">648 <strong>649 Cons:650 </strong>651 <ul>652 <li>653 Takes around ~2 hours for initial machine and project setup (Visual Studio, OS Specific WebView, Rust, Node/npm, crate installs/compiling, etc). And this is NOT a "click a button and walk away" setup.654 </li>655 <li>656 Builds must be done on target OS and can take 30-60 minutes per OS. Compared to NW.js or Electron where you can build for all OS's with a single command, which may take 15-30 minutes, but all will be done at the end; versus Tauri which takes twice as long for just one to finish.657 </li>658 <li>659 Relies on the OS's built in webview, which means you need to build your UI in a cross-browser friendly manner, and use special tooling that those not deeply familiar with frontend development would be new to. Also you must use features based on the lowest common denomenator, meaning newer language or browser features will not be accessible660 </li>661 <li>662 On Linux, you must build using the oldest Linux version you want to support, and may need to do multiple builds if the Linux versions differ greatly enough663 </li>664 </ul>665 </div>666 <div>667 <strong>668 Notable Projects made with Tauri:669 </strong>670 <ul>671 <li>672 <a rel="noopener noreferrer" target="_blank">673 "Awesome-Tauri" app list674 </a>675 - Bulleted list of apps made with Tauri, in seemingly no particular order or with any screenshots676 </li>677 <li>678 <a rel="noopener noreferrer" target="_blank">679 Add a notable project made with this tool680 </a>681 </li>682 </ul>683 </div>684 <!-- -->685 <!-- -->686 <!-- -->687 </div>688 </div>689 <div class="card">690 <div class="card-header">691 <a rel="noopener noreferrer" target="_blank">692 Xamarin693 </a>694 <span class="expand">695 </span>696 <span class="shrink">697 </span>698 </div>699 <div class="card-body">700 <a rel="noopener noreferrer" target="_blank">701 <img alt="Xamarin logo" class="logo" src="rick.jpg">702 </a>703 <div class="section">704 <strong>705 Languages:706 </strong>707 C#, .NET, F#708 </div>709 <div class="section">710 <strong>711 Supported platforms:712 </strong>713 iOS, Android, Windows Phone, Windows, OSX714 </div>715 <div class="section">716 <strong>717 Pros:718 </strong>719 <ul>720 <li>721 Currently supports OSX 10.7+ (though the upcoming versions will only support 10.9+)722 </li>723 <li>724 Code can be shared across Desktop and Mobile apps725 </li>726 <li>727 OSX apps can use XCode's interface builder, or create UI's with C#728 </li>729 <li>730 Apps are written in C#/F#/.NET and can consume libraries written in VB and razor templates731 </li>732 </ul>733 </div>734 <div class="section">735 <strong>736 Cons:737 </strong>738 <ul>739 <li>740 Very little abstraction is handled for you between the different OS's, versus something like NW.js where you write code to its API and it converts it for each OS741 </li>742 <li>743 No Linux support744 </li>745 <li>746 Windows support is limited to UWP (Microsoft Store) format, meaning it can only support Windows 8+747 </li>748 <li>749 Developing for OSX apps requires a lot of knowledge of developing traditional native OSX desktop apps that talk directly to the OS API750 </li>751 </ul>752 </div>753 <div>754 <strong>755 Notable Projects made with Xamarin:756 </strong>757 <ul>758 <li>759 <a rel="noopener noreferrer" target="_blank">760 Add a notable project made with this tool761 </a>762 </li>763 </ul>764 </div>765 <!-- -->766 <!-- -->767 <!-- -->768 </div>769 </div>770 <div class="card">771 <div class="card-header">772 <a rel="noopener noreferrer" target="_blank">773 Wails774 </a>775 <span class="expand">776 </span>777 <span class="shrink">778 </span>779 </div>780 <div class="card-body">781 <a rel="noopener noreferrer" target="_blank">782 <img alt="Wails logo" class="logo" src="rick.jpg">783 </a>784 <div class="section">785 <strong>786 Languages:787 </strong>788 HTML, CSS, JS, Go789 </div>790 <div class="section">791 <strong>792 Supported platforms:793 </strong>794 Linux, OSX, Windows795 </div>796 <div class="section">797 <strong>798 Pros:799 </strong>800 <ul>801 <li>802 Does not ship a browser, uses what is installed803 </li>804 <li>805 Builds to a single binary, packaging all frontend/backend code together (if all environment requirements are met)806 </li>807 <li>808 Has decent Linux OS support, though requires extra effort for each to be set up809 </li>810 <li>811 Has a decent CLI to generate projects that also has templates for many JS frameworks built in (Vue, Angular, Svelte, VanillaJS, Vuetify, React)812 </li>813 </ul>814 </div>815 <div class="section">816 <strong>817 Cons:818 </strong>819 <ul>820 <li>821 Windows version relies on Internet Explorer 11's engine. IE11 was released in 2013 and many modern JS frameworks (like Vue 3) have dropped support for IE11 in order to use newer browser APIs like proxies for performance improvements and better developer ergonomics.822 </li>823 <li>824 Saving changes on the frontend are not dynamically shown in the running app. You must kill the app and rebuild it to see changes.825 </li>826 <li>827 Does not support making frameless apps, but does support fullscreen828 </li>829 <li>830 Does not support making tray apps831 </li>832 </ul>833 </div>834 <div>835 <strong>836 Notable Projects made with Wails:837 </strong>838 <ul>839 <li>840 <a rel="noopener noreferrer" target="_blank">841 Wails Official showcase842 </a>843 - Curated list of apps made with Wails844 </li>845 <li>846 <a rel="noopener noreferrer" target="_blank">847 Add a notable project made with this tool848 </a>849 </li>850 </ul>851 </div>852 <div class="section">853 <strong>854 Frameworks:855 </strong>856 <ul>857 <li>858 Vue, Angular, React, Svelte -859 <a rel="noopener noreferrer" target="_blank">860 Built into Wails-CLI861 </a>862 </li>863 </ul>864 </div>865 <!-- -->866 <div class="section">867 <strong>868 Tutorials:869 </strong>870 <ul>871 <li>872 <strong>873 YouTube874 </strong>875 -876 <a rel="noopener noreferrer" target="_blank">877 Building Desktop App in Go using Wails878 </a>879 <em>880 by Alex Pliutau881 </em>882 </li>883 </ul>884 </div>885 </div>886 </div>887 <div class="card">888 <div class="card-header">889 <a rel="noopener noreferrer" target="_blank">890 Adobe Animate CC891 </a>892 <span class="expand">893 </span>894 <span class="shrink">895 </span>896 </div>897 <div class="card-body">898 <a rel="noopener noreferrer" target="_blank">899 <img alt="Adobe Animate CC logo" class="logo" src="rick.jpg">900 </a>901 <div class="section">902 <strong>903 Languages:904 </strong>905 ActionScript906 </div>907 <div class="section">908 <strong>909 Supported platforms:910 </strong>911 Windows, OSX, Android, iOS912 </div>913 <div class="section">914 <strong>915 Pros:916 </strong>917 <ul>918 <li>919 Adobe Animate (formerly Adobe Flash Professional) allows you to produce Flash files (.swf), HTML5 compatible projects, and also export out to a self contained executable for Windows and OSX (so nothing additional needs to be installed to run it)920 </li>921 <li>922 Versatile and powerful vector-based animation tools923 </li>924 <li>925 Distribution sizes are small, typically around 6-20MB926 </li>927 <li>928 Aimed primarily at animated short films, and 2D games929 </li>930 </ul>931 </div>932 <div class="section">933 <strong>934 Cons:935 </strong>936 <ul>937 <li>938 Requires renting the software month-to-month. If you stop paying for a Creative Cloud subscription, you will no long be able to edit/modify your application.939 </li>940 <li>941 Lacks true Linux support. There is a separate download for a standalone Linux projector file that a SWF can be loaded in, but no way to build your app into it in the same way the Windows/OSX version can942 </li>943 <li>944 Very limited library/framework/tooling support945 </li>946 <li>947 Very limited access to file system, hardware, storage, or OS features948 </li>949 </ul>950 </div>951 <div>952 <strong>953 Notable Projects made with Adobe Animate CC:954 </strong>955 <ul>956 <li>957 <a rel="noopener noreferrer" target="_blank">958 Knights of the Stream959 </a>960 - A desktop app for Twitch streams that allows viewers to level up a character by participating in chat, and for the streamers to reward participants with in-game rewards.961 </li>962 <li>963 <a rel="noopener noreferrer" target="_blank">964 Add a notable project made with this tool965 </a>966 </li>967 </ul>968 </div>969 <!-- -->970 <!-- -->971 <div class="section">972 <strong>973 Tutorials:974 </strong>975 <ul>976 <li>977 <strong>978 YouTube979 </strong>980 -981 <a rel="noopener noreferrer" target="_blank">982 Publishing your Flash project to a projector983 </a>984 <em>985 by Brian Kelly986 </em>987 </li>988 <li>989 <strong>990 YouTube991 </strong>992 -993 <a rel="noopener noreferrer" target="_blank">994 Publishing mobile and desktop applications995 </a>996 <em>997 by Lynda.com998 </em>999 </li>1000 </ul>1001 </div>1002 </div>1003 </div>1004 <div class="card">1005 <div class="card-header">1006 <a rel="noopener noreferrer" target="_blank">1007 LibUI-Node1008 </a>1009 <span class="expand">1010 </span>1011 <span class="shrink">1012 </span>1013 </div>1014 <div class="card-body">1015 <!-- -->1016 <div class="section">1017 <strong>1018 Languages:1019 </strong>1020 JS, Node.js1021 </div>1022 <div class="section">1023 <strong>1024 Supported platforms:1025 </strong>1026 Windows, Linux, OSX1027 </div>1028 <div class="section">1029 <strong>1030 Pros:1031 </strong>1032 <ul>1033 <li>1034 Uses minimal amounts of resources, much less than NW.js and Electron1035 </li>1036 <li>1037 Built package can be as small as ~20MB (compared to ~70MB (NW) and ~120MB (Electron))1038 </li>1039 <li>1040 Distribution sizes can be as low as 10MB (packaged installer)1041 </li>1042 <li>1043 Can use node_modules1044 </li>1045 </ul>1046 </div>1047 <div class="section">1048 <strong>1049 Cons:1050 </strong>1051 <ul>1052 <li>1053 Requires native build tools and to do builds on each target platform1054 </li>1055 <li>1056 Limited-to-no styling options, all apps look like vanilla form fields1057 </li>1058 <li>1059 Very new, not out of beta1060 </li>1061 <li>1062 Not great OS support, or build tools yet1063 </li>1064 </ul>1065 </div>1066 <div>1067 <strong>1068 Notable Projects made with LibUI-Node:1069 </strong>1070 <ul>1071 <li>1072 <a rel="noopener noreferrer" target="_blank">1073 Add a notable project made with this tool1074 </a>1075 </li>1076 </ul>1077 </div>1078 <div class="section">1079 <strong>1080 Frameworks:1081 </strong>1082 <ul>1083 <li>1084 React -1085 <a rel="noopener noreferrer" target="_blank">1086 Proton-Native1087 </a>1088 </li>1089 <li>1090 Vue.js -1091 <a rel="noopener noreferrer" target="_blank">1092 Vuido1093 </a>1094 </li>1095 </ul>1096 </div>1097 <!-- -->1098 <div class="section">1099 <strong>1100 Tutorials:1101 </strong>1102 <ul>1103 <li>1104 <strong>1105 dev.to1106 </strong>1107 -1108 <a rel="noopener noreferrer" target="_blank">1109 Building a Desktop App with Vue: Vuido1110 </a>1111 <em>1112 by Natalia Tepluhina1113 </em>1114 </li>1115 </ul>1116 </div>1117 </div>1118 </div>1119 <div class="card">1120 <div class="card-header">1121 <a rel="noopener noreferrer" target="_blank">1122 LibUI1123 </a>1124 <span class="expand">1125 </span>1126 <span class="shrink">1127 </span>1128 </div>1129 <div class="card-body">1130 <!-- -->1131 <div class="section">1132 <strong>1133 Languages:1134 </strong>1135 C, C++, C#, .NET, Lisp, D, Haskell, Node.js, Kotlin, Lua, Perl, PHP, Python, Ruby, Rust, Scala, Swift1136 </div>1137 <div class="section">1138 <strong>1139 Supported platforms:1140 </strong>1141 Windows, Linux, OSX1142 </div>1143 <div class="section">1144 <strong>1145 Pros:1146 </strong>1147 <ul>1148 <li>1149 Uses the native OS UI, allowing for fairly small applications1150 </li>1151 <li>1152 Wide support of bindings for other languages1153 </li>1154 <li>1155 Uses very few resources1156 </li>1157 </ul>1158 </div>1159 <div class="section">1160 <strong>1161 Cons:1162 </strong>1163 <ul>1164 <li>1165 Quality and level of completion of bindings varies quite a bit1166 </li>1167 <li>1168 You are limited to very basic form-like UI's1169 </li>1170 <li>1171 Most bindings require native build tools and doing builds on each target OS1172 </li>1173 <li>1174 Dev, build, and distribution tools are weak or completely lacking1175 </li>1176 </ul>1177 </div>1178 <div>1179 <strong>1180 Notable Projects made with LibUI:1181 </strong>1182 <ul>1183 <li>1184 <a rel="noopener noreferrer" target="_blank">1185 Add a notable project made with this tool1186 </a>1187 </li>1188 </ul>1189 </div>1190 <!-- -->1191 <!-- -->1192 <!-- -->1193 </div>1194 </div>1195 <div class="card">1196 <div class="card-header">1197 <a rel="noopener noreferrer" target="_blank">1198 Sciter1199 </a>1200 <span class="expand">