Skip to content

Feature complete full-stack application templates with screenshots #6097

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
shai-almog merged 2 commits into from
Oct 24, 2026
Merged

Feature complete full-stack application templates with screenshots #6097

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3211136
Refresh Unity and full-stack sample discovery and restore theme tracking
shai-almog Oct 24, 2026
b7b3d64
Feature complete full-stack templates with screenshots
shai-almog Oct 24, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,14 +14,28 @@

The UI ships with your app, so you control its components and theme. Native interfaces and peer components give you access to platform SDKs and views. The framework is GPLv2 with the Classpath Exception: free for commercial applications, with no royalties.

## Start with a complete full-stack application

Generate a complete application from Initializr, then make it your own. These templates include the Java client, backend, database and administration screens, with guides for running and customizing them. The template source is free under MIT-0.

| [Savor — Food delivery](https://www.codenameone.com/savor/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=savor) | [Parley — Private messaging](https://www.codenameone.com/parley/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=parley) |
| --- | --- |
| <a href="https://www.codenameone.com/savor/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=savor"><img src="docs/developer-guide/img/savor-customer-home.png" alt="Savor restaurant browsing screen" width="200"></a><br><br>Customer, restaurant, courier and admin screens, with a Java backend for ordering, dispatch, tracking and payments. | <a href="https://www.codenameone.com/parley/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=parley"><img src="docs/developer-guide/img/parley-chats.png" alt="Parley conversations screen" width="200"></a><br><br>Chats, groups, voice and video calls, with a Java backend and an administration console. |

| [Wayline — Ride hailing](https://www.codenameone.com/wayline/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=wayline) | [Skirmish — Multiplayer strategy](https://www.codenameone.com/skirmish/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=skirmish) |
| --- | --- |
| <a href="https://www.codenameone.com/wayline/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=wayline"><img src="docs/developer-guide/img/wayline-rider-home.png" alt="Wayline rider map and destination screen" width="200"></a><br><br>Rider, driver and admin screens, with a Java backend for matching, live trips, earnings and payments. | <a href="https://www.codenameone.com/skirmish/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=skirmish"><img src="docs/developer-guide/img/skirmish-battle.png" alt="Skirmish live battle screen" width="200"></a><br><br>Online battles, replays and progression, with a Java game server and a moderation console. |

[Generate your application](https://www.codenameone.com/initializr/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=template-start) · [Explore the complete templates](https://www.codenameone.com/demos/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=fullstack-samples)

| What do you want to build? | Start here |
| --- | --- |
| A new Java app | [Generate a project](https://www.codenameone.com/initializr/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=app-start) or [try the browser playground](https://www.codenameone.com/playground/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=playground) |
| A native Java service | [Build a backend](https://www.codenameone.com/developer-guide/backend/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=backend) with Spring-style APIs and no JVM in the deployed executable |
| An app and its backend | [Share models and generated REST clients](https://www.codenameone.com/blog/java-backend-shared-models/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=shared-models) |
| An existing Android app on more platforms | [Import classic Android application code](https://www.codenameone.com/developer-guide/android-interop/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=android-import), including activities, XML layouts and resources |
| Existing Flutter screens | [Compile supported Dart and Flutter code to Java](https://www.codenameone.com/developer-guide/flutter-interop/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=flutter-import); experimental compatibility, with interaction limits documented in the guide |
| A full-stack example to run | [Explore Wayline](https://www.codenameone.com/developer-guide/wayline-implementors-guide/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=wayline): a ride-hailing sample with rider, driver and admin screens, shared Java models and a backend; available as an Initializr template |
| A complete full-stack application | [Choose a template](#start-with-a-complete-full-stack-application): food delivery, messaging, ride hailing or multiplayer strategy |
| Evidence before adopting | [Compare performance](#measured-performance) and [inspect platform support](https://www.codenameone.com/port-status/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=platforms) |

### A backend that compiles the wiring into your application
Expand All @@ -40,6 +54,8 @@ Import an Android Studio module with `cn1:import-android-project`, or place its

The application runs through Codename One's ports without an Android runtime on the other platforms. This supports the documented classic Android API surface, not every Android library or framework behavior. Check the [supported APIs, side-by-side captures and limitations](https://www.codenameone.com/developer-guide/android-interop/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=android-coverage), particularly reflection, Parcel and SQLite concurrency, against your application's screens and data flows.

Experimental compatibility also covers [supported Unity 2D projects](https://www.codenameone.com/developer-guide/unity-interop/?utm_source=github&utm_medium=oss&utm_campaign=repo-readme&utm_content=unity-import). Check the documented API limits before porting; 3D rendering is outside this compatibility layer.

### Measured performance

These are published reference measurements, not a promise about every application. Each comparison uses a different workload; follow the links for hardware, commands and raw results.
Expand Down
19 changes: 19 additions & 0 deletions docs/website/assets/css/extended/zz-cn1-design-system.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1767,3 +1767,22 @@ body.dark .cn1-footer-logo {
.cn1-home-platforms .cn1-platform-grid li { padding: 16px; }
.cn1-home-platforms .cn1-platform-grid strong { font-size: 17px; }
}

/* Complete application templates on the homepage. */
.cn1-home-templates__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.cn1-home-template { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); align-items: center; overflow: hidden; border: 1px solid var(--cn1-border); border-radius: var(--cn1-radius); background: var(--cn1-surface); }
.cn1-home-template__screen { display: flex; align-items: center; justify-content: center; align-self: stretch; padding: 24px; background: linear-gradient(145deg, #202b4b, #293956); }
.cn1-home-template__screen img { display: block; width: 100%; max-width: 210px; height: auto; border-radius: 12px; box-shadow: 0 10px 24px #0004; }
.cn1-home-template__body { min-width: 0; padding: 24px; }
.cn1-home-template__body h3 { margin: 6px 0 16px; font-size: 30px; }
.cn1-home-template__body > p:not(.cn1-eyebrow) { color: var(--cn1-muted); line-height: 1.65; }
.cn1-home-template__body > a { display: inline-block; margin-top: 18px; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 800px) {
.cn1-home-templates__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
.cn1-home-template { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
.cn1-home-template__screen { padding: 12px; }
.cn1-home-template__body { padding: 18px 14px; }
.cn1-home-template__body h3 { font-size: 26px; }
}
63 changes: 60 additions & 3 deletions docs/website/layouts/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,64 @@ <h1>Full-stack Java.<br><span>Compiled to native.</span></h1>
{{ partial "cn1-proof-strip.html" . }}
</div>

<section class="cn1-v2-section cn1-home-templates" id="full-stack-templates">
<div class="cn1-v2-section__intro">
<p class="cn1-eyebrow">Complete full-stack templates</p>
<h2>Start with an application. Make it yours.</h2>
<p>Generate the Java client, backend, database and administration screens in one project. Run it, change the branding and build on the features already connected. Template source is free under MIT-0.</p>
<div class="cn1-action-row">
{{ partial "cn1-cta.html" (dict "label" "Generate your application" "href" "/initializr/" "event" "home-template-start") }}
{{ partial "cn1-cta.html" (dict "label" "Explore all templates" "href" "/demos/" "event" "home-fullstack-samples" "variant" "secondary") }}
</div>
</div>
<div class="cn1-home-templates__grid">
<article class="cn1-home-template">
<a class="cn1-home-template__screen" href="/savor/" data-cn1-conversion="home-savor" aria-label="Explore Savor, the food delivery template">
<img src="/developer-guide/img/savor-customer-home.png" alt="Savor restaurant browsing screen" width="420" height="909" loading="lazy">
</a>
<div class="cn1-home-template__body">
<p class="cn1-eyebrow">Food delivery</p>
<h3>Savor</h3>
<p>Customer, restaurant, courier and admin screens, with a Java backend for ordering, dispatch, tracking and payments.</p>
<a href="/savor/" data-cn1-conversion="home-savor">Explore Savor →</a>
</div>
</article>
<article class="cn1-home-template">
<a class="cn1-home-template__screen" href="/parley/" data-cn1-conversion="home-parley" aria-label="Explore Parley, the private messaging template">
<img src="/developer-guide/img/parley-chats.png" alt="Parley conversations screen" width="419" height="909" loading="lazy">
</a>
<div class="cn1-home-template__body">
<p class="cn1-eyebrow">Private messaging</p>
<h3>Parley</h3>
<p>Chats, groups, voice and video calls, with a Java backend and an administration console.</p>
<a href="/parley/" data-cn1-conversion="home-parley">Explore Parley →</a>
</div>
</article>
<article class="cn1-home-template">
<a class="cn1-home-template__screen" href="/wayline/" data-cn1-conversion="home-wayline" aria-label="Explore Wayline, the ride hailing template">
<img src="/developer-guide/img/wayline-rider-home.png" alt="Wayline rider map and destination screen" width="420" height="909" loading="lazy">
</a>
<div class="cn1-home-template__body">
<p class="cn1-eyebrow">Ride hailing</p>
<h3>Wayline</h3>
<p>Rider, driver and admin screens, with a Java backend for matching, live trips, earnings and payments.</p>
<a href="/wayline/" data-cn1-conversion="home-wayline">Explore Wayline →</a>
</div>
</article>
<article class="cn1-home-template">
<a class="cn1-home-template__screen" href="/skirmish/" data-cn1-conversion="home-skirmish" aria-label="Explore Skirmish, the multiplayer strategy template">
<img src="/developer-guide/img/skirmish-battle.png" alt="Skirmish live battle screen" width="420" height="909" loading="lazy">
</a>
<div class="cn1-home-template__body">
<p class="cn1-eyebrow">Multiplayer strategy</p>
<h3>Skirmish</h3>
<p>Online battles, replays and progression, with a Java game server and a moderation console.</p>
<a href="/skirmish/" data-cn1-conversion="home-skirmish">Explore Skirmish →</a>
</div>
</article>
</div>
</section>

<section class="cn1-v2-section" id="build-with-java">
<div class="cn1-v2-section__intro">
<p class="cn1-eyebrow">Choose your starting point</p>
Expand Down Expand Up @@ -74,7 +132,7 @@ <h3>Your Android app on more platforms</h3>
<p>Bring Java or Kotlin activities, XML layouts and resources to iOS, desktop and the web.</p>
<p class="cn1-home-caveat">Check your dependencies against the supported Android and AndroidX APIs.</p>
<a href="/developer-guide/android-interop/" data-cn1-conversion="home-android-import">Explore Android compatibility →</a>
<p class="cn1-home-caveat">Also explore <a href="/developer-guide/flutter-interop/" data-cn1-conversion="home-flutter-import">experimental Flutter compatibility</a>. Some callbacks and parameters are not implemented.</p>
<p class="cn1-home-caveat">Experimental imports: <a href="/developer-guide/flutter-interop/" data-cn1-conversion="home-flutter-import">Flutter screens</a> and <a href="/developer-guide/unity-interop/" data-cn1-conversion="home-unity-import">Unity 2D games</a>. Check the documented API and behavior limits before porting.</p>
</div>
<figure class="cn1-home-visual cn1-home-gallery">
<div class="cn1-home-gallery__screens">
Expand All @@ -89,7 +147,6 @@ <h3>Your Android app on more platforms</h3>
<h3>Keep app and server contracts together</h3>
<p>Share Java models and generate typed REST clients. Change the contract in one place.</p>
<a href="/blog/java-backend-shared-models/" data-cn1-conversion="home-shared-models">See the shared-model example →</a>
<p class="cn1-home-caveat">Try <a href="/developer-guide/wayline-implementors-guide/" data-cn1-conversion="home-wayline">Wayline</a>, the full-stack ride-hailing template in Initializr.</p>
</div>
<figure class="cn1-home-visual">
<div class="cn1-home-contract"><span>shared /</span><code>Java models</code><div class="cn1-home-contract__branches"><div><b>App</b><small>Generated REST client</small></div><div><b>Backend</b><small>Typed controller</small></div></div></div>
Expand Down Expand Up @@ -134,7 +191,7 @@ <h2>The screen you test is the screen you ship.</h2>
<figure class="cn1-home-themes">
<img src="/proof/tab-morph-native-vs-cn1.png" alt="Native iOS 26 and Codename One tab states, in light and dark themes" width="900" height="323" loading="lazy">
<img src="/proof/android-material3-showcase.png" alt="Codename One Material 3 theme in light and dark appearance" width="800" height="600" loading="lazy">
<figcaption>Liquid Glass and Material 3, captured from the running UI. <a href="/blog/liquid-glass-material-3-modern-native-themes/">Explore the themes →</a></figcaption>
<figcaption>Liquid Glass and Material 3, captured from the running UI. <a href="/blog/liquid-glass-material-3-modern-native-themes/" data-cn1-conversion="home-ui-control">Explore the themes →</a></figcaption>
</figure>
<div class="cn1-v2-ownership__grid">
<article class="cn1-v2-feature cn1-v2-feature--accent">
Expand Down
Loading