Without UX Native
Browser navigation bar, web navbar — it feels like a website.
With UX Native
Native title bar, no browser chrome — it feels like an app.
Hotwire Native Integration
Go Native with your Symfony app
Wrap your Symfony web application in a native mobile shell with Hotwire Native. Detect native requests, conditionally render content, and generate JSON configurations for your mobile clients.
composer require symfony/ux-nativeWhat Native gives you
-
Your app, wrapped
iOS and Android shells around your Symfony app.
-
Request detection
Know when a native client asks for a page.
-
Conditional rendering
Serve a different template to native clients.
-
Path configuration
Generate the JSON your mobile clients consume.
-
Native navigation
Modals, tabs and back stacks, driven from PHP.
What the bundle hands your app
The server drives the shell.
Your Symfony application decides what the mobile client sees and how it navigates. The shell only follows.
Native requests, detected
A listener flags requests coming from the shell, and Twig branches on it.
{% if ux_is_native() %}
{# the native shell draws its own bar #}
{% else %}
{{ include('_navbar.html.twig') }}
{% endif %}Navigation written in PHP
Describe which paths open as a modal or push a new screen. No JSON written by hand.
#[AsNativeConfiguration('/config/ios.json')]
public function ios(): Configuration
{
return new Configuration(rules: [
new Rule(
patterns: ['/new$'],
properties: ['presentation' => 'modal'],
),
]);
}Built on demand
One command renders every configuration file your clients download at launch.
php bin/console ux:native:build-configsInstall Native.
$ composer require symfony/ux-nativeMore from Symfony UX.
Native is one package among many. They share the same Stimulus foundation and install the same way.
Vue.js
Quickly render <Vue /> components & pass them props.
Image Cropper
Form Type and tools for cropping images
Stylized Dropzone
Form type for stylized "drop zone" for file uploads
Keep Native at hand.
Documentation, the people behind it, and where to ask when something does not behave.