[{"data":1,"prerenderedAt":1531},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Ftesting-on-device":460,"\u002Fguides\u002Ftesting-on-device-surround":1526},[4,34,51,301,327,332,337,406],{"title":5,"path":6,"stem":7,"children":8,"package":11,"icon":33},"Getting Started","\u002Fgetting-started","1.getting-started\u002F1.index",[9,13,18,23,28],{"title":10,"path":6,"stem":7,"package":11,"icon":12},"Introduction",null,"i-lucide-house",{"title":14,"path":15,"stem":16,"package":11,"icon":17},"Installation","\u002Fgetting-started\u002Finstallation","1.getting-started\u002F2.installation","i-lucide-download",{"title":19,"path":20,"stem":21,"package":11,"icon":22},"Icons","\u002Fgetting-started\u002Ficons","1.getting-started\u002F3.icons","i-lucide-sparkles",{"title":24,"path":25,"stem":26,"package":11,"icon":27},"CLI","\u002Fgetting-started\u002Fcli","1.getting-started\u002F4.cli","i-lucide-terminal",{"title":29,"path":30,"stem":31,"package":11,"icon":32},"Roadmap","\u002Fgetting-started\u002Froadmap","1.getting-started\u002F5.roadmap","i-lucide-map","i-lucide-rocket",{"title":35,"package":11,"icon":36,"path":37,"stem":38,"children":39,"page":50},"Packages","i-lucide-package","\u002Fpackages","2.packages",[40,45],{"title":41,"path":42,"stem":43,"package":11,"icon":44},"@vyui\u002Fcore","\u002Fpackages\u002Fcore","2.packages\u002F1.core","i-lucide-box",{"title":46,"path":47,"stem":48,"package":11,"icon":49},"@vyui\u002Fkit","\u002Fpackages\u002Fkit","2.packages\u002F2.kit","i-lucide-layers",false,{"title":52,"package":11,"icon":53,"path":54,"stem":55,"children":56},"Components","i-lucide-layout-grid","\u002Fcomponents","3.components",[57,59,65,70,75,80,85,90,95,100,105,110,115,120,125,130,135,140,144,149,153,158,163,168,173,178,183,188,193,198,203,208,213,218,223,228,233,238,242,246,251,256,261,266,271,276,280,284,288,292,296],{"title":52,"path":54,"stem":58,"package":11,"icon":53},"3.components\u002Findex",{"title":60,"path":61,"stem":62,"package":63,"icon":64},"Accordion","\u002Fcomponents\u002Faccordion","3.components\u002Faccordion","kit","i-lucide-list-collapse",{"title":66,"path":67,"stem":68,"package":63,"icon":69},"Action Sheet","\u002Fcomponents\u002Faction-sheet","3.components\u002Faction-sheet","i-lucide-panel-bottom",{"title":71,"path":72,"stem":73,"package":63,"icon":74},"Alert","\u002Fcomponents\u002Falert","3.components\u002Falert","i-lucide-triangle-alert",{"title":76,"path":77,"stem":78,"package":79,"icon":74},"Alert Dialog","\u002Fcomponents\u002Falert-dialog","3.components\u002Falert-dialog","core",{"title":81,"path":82,"stem":83,"package":63,"icon":84},"App","\u002Fcomponents\u002Fapp","3.components\u002Fapp","i-lucide-smartphone",{"title":86,"path":87,"stem":88,"package":63,"icon":89},"Aspect Ratio","\u002Fcomponents\u002Faspect-ratio","3.components\u002Faspect-ratio","i-lucide-ratio",{"title":91,"path":92,"stem":93,"package":63,"icon":94},"Avatar","\u002Fcomponents\u002Favatar","3.components\u002Favatar","i-lucide-circle-user-round",{"title":96,"path":97,"stem":98,"package":63,"icon":99},"Avatar Group","\u002Fcomponents\u002Favatar-group","3.components\u002Favatar-group","i-lucide-users-round",{"title":101,"path":102,"stem":103,"package":63,"icon":104},"Button","\u002Fcomponents\u002Fbutton","3.components\u002Fbutton","i-lucide-square-mouse-pointer",{"title":106,"path":107,"stem":108,"package":63,"icon":109},"Calendar","\u002Fcomponents\u002Fcalendar","3.components\u002Fcalendar","i-lucide-calendar-days",{"title":111,"path":112,"stem":113,"package":63,"icon":114},"Card","\u002Fcomponents\u002Fcard","3.components\u002Fcard","i-lucide-square",{"title":116,"path":117,"stem":118,"package":63,"icon":119},"Checkbox","\u002Fcomponents\u002Fcheckbox","3.components\u002Fcheckbox","i-lucide-square-check",{"title":121,"path":122,"stem":123,"package":79,"icon":124},"Collapsible","\u002Fcomponents\u002Fcollapsible","3.components\u002Fcollapsible","i-lucide-chevrons-down-up",{"title":126,"path":127,"stem":128,"package":79,"icon":129},"Dialog","\u002Fcomponents\u002Fdialog","3.components\u002Fdialog","i-lucide-app-window",{"title":131,"path":132,"stem":133,"package":79,"icon":134},"Draggable","\u002Fcomponents\u002Fdraggable","3.components\u002Fdraggable","i-lucide-move",{"title":136,"path":137,"stem":138,"package":63,"icon":139},"Form","\u002Fcomponents\u002Fform","3.components\u002Fform","i-lucide-clipboard-list",{"title":141,"path":142,"stem":143,"package":79,"icon":22},"Icon","\u002Fcomponents\u002Ficon","3.components\u002Ficon",{"title":145,"path":146,"stem":147,"package":63,"icon":148},"Input","\u002Fcomponents\u002Finput","3.components\u002Finput","i-lucide-text-cursor-input",{"title":150,"path":151,"stem":152,"package":63,"icon":69},"Island","\u002Fcomponents\u002Fisland","3.components\u002Fisland",{"title":154,"path":155,"stem":156,"package":63,"icon":157},"Island Button","\u002Fcomponents\u002Fisland-button","3.components\u002Fisland-button","i-lucide-circle-ellipsis",{"title":159,"path":160,"stem":161,"package":63,"icon":162},"Island Group","\u002Fcomponents\u002Fisland-group","3.components\u002Fisland-group","i-lucide-panels-top-left",{"title":164,"path":165,"stem":166,"package":63,"icon":167},"KeyboardAware","\u002Fcomponents\u002Fkeyboard-aware","3.components\u002Fkeyboard-aware","i-lucide-keyboard",{"title":169,"path":170,"stem":171,"package":63,"icon":172},"Label","\u002Fcomponents\u002Flabel","3.components\u002Flabel","i-lucide-tag",{"title":174,"path":175,"stem":176,"package":63,"icon":177},"Modal","\u002Fcomponents\u002Fmodal","3.components\u002Fmodal","i-lucide-gallery-vertical-end",{"title":179,"path":180,"stem":181,"package":79,"icon":182},"Navigation","\u002Fcomponents\u002Fnavigation","3.components\u002Fnavigation","i-lucide-route",{"title":184,"path":185,"stem":186,"package":63,"icon":187},"Number Field","\u002Fcomponents\u002Fnumber-field","3.components\u002Fnumber-field","i-lucide-list-plus",{"title":189,"path":190,"stem":191,"package":79,"icon":192},"Pagination","\u002Fcomponents\u002Fpagination","3.components\u002Fpagination","i-lucide-ellipsis",{"title":194,"path":195,"stem":196,"package":63,"icon":197},"Pin Input","\u002Fcomponents\u002Fpin-input","3.components\u002Fpin-input","i-lucide-key-round",{"title":199,"path":200,"stem":201,"package":63,"icon":202},"Placeholder","\u002Fcomponents\u002Fplaceholder","3.components\u002Fplaceholder","i-lucide-square-dashed",{"title":204,"path":205,"stem":206,"package":63,"icon":207},"Popover","\u002Fcomponents\u002Fpopover","3.components\u002Fpopover","i-lucide-message-square-more",{"title":209,"path":210,"stem":211,"package":63,"icon":212},"Progress","\u002Fcomponents\u002Fprogress","3.components\u002Fprogress","i-lucide-chart-no-axes-column-increasing",{"title":214,"path":215,"stem":216,"package":63,"icon":217},"Radio Group","\u002Fcomponents\u002Fradio-group","3.components\u002Fradio-group","i-lucide-circle-dot",{"title":219,"path":220,"stem":221,"package":63,"icon":222},"Rating","\u002Fcomponents\u002Frating","3.components\u002Frating","i-lucide-star",{"title":224,"path":225,"stem":226,"package":79,"icon":227},"Scroll View","\u002Fcomponents\u002Fscroll-view","3.components\u002Fscroll-view","i-lucide-scroll",{"title":229,"path":230,"stem":231,"package":63,"icon":232},"Select","\u002Fcomponents\u002Fselect","3.components\u002Fselect","i-lucide-list-check",{"title":234,"path":235,"stem":236,"package":63,"icon":237},"Separator","\u002Fcomponents\u002Fseparator","3.components\u002Fseparator","i-lucide-separator-horizontal",{"title":239,"path":240,"stem":241,"package":79,"icon":69},"Sheet","\u002Fcomponents\u002Fsheet","3.components\u002Fsheet",{"title":243,"path":244,"stem":245,"package":63,"icon":162},"Skeleton","\u002Fcomponents\u002Fskeleton","3.components\u002Fskeleton",{"title":247,"path":248,"stem":249,"package":63,"icon":250},"Slider","\u002Fcomponents\u002Fslider","3.components\u002Fslider","i-lucide-sliders-horizontal",{"title":252,"path":253,"stem":254,"package":63,"icon":255},"Sortable","\u002Fcomponents\u002Fsortable","3.components\u002Fsortable","i-lucide-list-restart",{"title":257,"path":258,"stem":259,"package":63,"icon":260},"Stepper","\u002Fcomponents\u002Fstepper","3.components\u002Fstepper","i-lucide-list-ordered",{"title":262,"path":263,"stem":264,"package":63,"icon":265},"Swipe Action","\u002Fcomponents\u002Fswipe-action","3.components\u002Fswipe-action","i-lucide-move-horizontal",{"title":267,"path":268,"stem":269,"package":63,"icon":270},"Swiper","\u002Fcomponents\u002Fswiper","3.components\u002Fswiper","i-lucide-gallery-horizontal-end",{"title":272,"path":273,"stem":274,"package":63,"icon":275},"Switch","\u002Fcomponents\u002Fswitch","3.components\u002Fswitch","i-lucide-toggle-right",{"title":277,"path":278,"stem":279,"package":63,"icon":162},"Tabs","\u002Fcomponents\u002Ftabs","3.components\u002Ftabs",{"title":281,"path":282,"stem":283,"package":63,"icon":148},"Textarea","\u002Fcomponents\u002Ftextarea","3.components\u002Ftextarea",{"title":285,"path":286,"stem":287,"package":63,"icon":207},"Toast","\u002Fcomponents\u002Ftoast","3.components\u002Ftoast",{"title":289,"path":290,"stem":291,"package":63,"icon":275},"Toggle","\u002Fcomponents\u002Ftoggle","3.components\u002Ftoggle",{"title":293,"path":294,"stem":295,"package":63,"icon":162},"Toggle Group","\u002Fcomponents\u002Ftoggle-group","3.components\u002Ftoggle-group",{"title":297,"path":298,"stem":299,"package":63,"icon":300},"Tray","\u002Fcomponents\u002Ftray","3.components\u002Ftray","i-lucide-square-dashed-bottom",{"title":302,"path":303,"stem":304,"children":305,"package":11,"icon":307},"Theming","\u002Ftheming","4.theming\u002F1.index",[306,308,312,317,322],{"title":302,"path":303,"stem":304,"package":11,"icon":307},"i-lucide-palette",{"title":309,"path":310,"stem":311,"package":11,"icon":250},"Overrides","\u002Ftheming\u002Foverrides","4.theming\u002F2.overrides",{"title":313,"path":314,"stem":315,"package":11,"icon":316},"Colors","\u002Ftheming\u002Fcolors","4.theming\u002F3.colors","i-lucide-swatch-book",{"title":318,"path":319,"stem":320,"package":11,"icon":321},"Dark Mode","\u002Ftheming\u002Fdark-mode","4.theming\u002F4.dark-mode","i-lucide-moon",{"title":323,"path":324,"stem":325,"package":11,"icon":326},"Fonts","\u002Ftheming\u002Ffonts","4.theming\u002F5.fonts","i-lucide-type",{"title":328,"path":329,"stem":330,"package":11,"icon":331},"Accessibility","\u002Faccessibility","5.accessibility","i-lucide-accessibility",{"title":333,"path":334,"stem":335,"package":11,"icon":336},"i18n","\u002Fi18n","6.i18n","i-lucide-languages",{"title":338,"path":339,"stem":340,"children":341,"package":11,"icon":343},"Composables","\u002Fcomposables","7.composables\u002F1.index",[342,344,349,354,359,364,369,374,378,383,387,391,396,401],{"title":338,"path":339,"stem":340,"package":11,"icon":343},"i-lucide-square-function",{"title":345,"path":346,"stem":347,"package":11,"icon":348},"useEmitAsProps","\u002Fcomposables\u002Fuse-emit-as-props","7.composables\u002F10.use-emit-as-props","i-lucide-zap",{"title":350,"path":351,"stem":352,"package":11,"icon":353},"useForwardPropsEmits","\u002Fcomposables\u002Fuse-forward-props-emits","7.composables\u002F11.use-forward-props-emits","i-lucide-merge",{"title":355,"path":356,"stem":357,"package":11,"icon":358},"useForwardExpose","\u002Fcomposables\u002Fuse-forward-expose","7.composables\u002F12.use-forward-expose","i-lucide-share-2",{"title":360,"path":361,"stem":362,"package":11,"icon":363},"useStateMachine","\u002Fcomposables\u002Fuse-state-machine","7.composables\u002F13.use-state-machine","i-lucide-workflow",{"title":365,"path":366,"stem":367,"package":11,"icon":368},"usePrimitiveElement","\u002Fcomposables\u002Fuse-primitive-element","7.composables\u002F14.use-primitive-element","i-lucide-crosshair",{"title":370,"path":371,"stem":372,"package":11,"icon":373},"useAppConfig","\u002Fcomposables\u002Fuse-app-config","7.composables\u002F2.use-app-config","i-lucide-settings",{"title":375,"path":376,"stem":377,"package":11,"icon":321},"useColorMode","\u002Fcomposables\u002Fuse-color-mode","7.composables\u002F3.use-color-mode",{"title":379,"path":380,"stem":381,"package":11,"icon":382},"useComponentIcons","\u002Fcomposables\u002Fuse-component-icons","7.composables\u002F4.use-component-icons","i-lucide-shapes",{"title":384,"path":385,"stem":386,"package":11,"icon":69},"useTray","\u002Fcomposables\u002Fuse-tray","7.composables\u002F5.use-tray",{"title":388,"path":389,"stem":390,"package":11,"icon":336},"i18n composables","\u002Fcomposables\u002Fi18n-composables","7.composables\u002F6.i18n-composables",{"title":392,"path":393,"stem":394,"package":11,"icon":395},"useId","\u002Fcomposables\u002Fuse-id","7.composables\u002F7.use-id","i-lucide-hash",{"title":397,"path":398,"stem":399,"package":11,"icon":400},"useFilter","\u002Fcomposables\u002Fuse-filter","7.composables\u002F8.use-filter","i-lucide-filter",{"title":402,"path":403,"stem":404,"package":11,"icon":405},"useForwardProps","\u002Fcomposables\u002Fuse-forward-props","7.composables\u002F9.use-forward-props","i-lucide-arrow-right-left",{"title":407,"path":408,"stem":409,"children":410,"package":11,"icon":412},"Guides","\u002Fguides","8.guides\u002F1.index",[411,413,417,422,427,432,437,441,446,450,455],{"title":407,"path":408,"stem":409,"package":11,"icon":412},"i-lucide-book-open",{"title":414,"path":415,"stem":416,"package":11,"icon":348},"Instant first-frame rendering","\u002Fguides\u002Finstant-first-frame-rendering","8.guides\u002F10.instant-first-frame-rendering",{"title":418,"path":419,"stem":420,"package":11,"icon":421},"Why use Vy UI","\u002Fguides\u002Fwhy-vy-ui","8.guides\u002F11.why-vy-ui","i-lucide-help-circle",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":433,"path":434,"stem":435,"package":11,"icon":436},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":438,"path":439,"stem":440,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":442,"path":443,"stem":444,"package":11,"icon":445},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":447,"path":448,"stem":449,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":456,"path":457,"stem":458,"package":11,"icon":459},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":461,"title":438,"body":462,"description":1518,"extension":1519,"links":11,"meta":1520,"navigation":1521,"package":11,"path":439,"seo":1522,"stem":440,"__hash__":1525},"docs\u002F8.guides\u002F5.testing-on-device.md",{"type":463,"value":464,"toc":1509},"minimark",[465,474,479,506,510,520,847,871,882,886,889,923,942,1023,1037,1102,1105,1116,1166,1173,1177,1188,1447,1456,1460,1475,1482,1486,1505],[466,467,468,469,473],"p",{},"The browser preview rspeedy prints is the one target where Lynx behaves least like itself. Gestures run through mouse events rather than touch, ",[470,471,472],"code",{},"accessibility-*"," properties are ignored, and animations go through the web runtime. I do not believe anything I have only seen in a browser, and the fastest way onto real hardware is a QR code.",[475,476,478],"h2",{"id":477},"lynx-go","Lynx Go",[466,480,481,482,489,490,495,496,501,502,505],{},"Lynx Go embeds the Lynx runtime and loads a bundle from a URL, so you get your app onto a real device without building anything native. It ships as ",[483,484,488],"a",{"href":485,"rel":486},"https:\u002F\u002Fapps.apple.com\u002Fus\u002Fapp\u002Flynx-go-dev-explorer\u002Fid6743227790",[487],"nofollow","Lynx Go — Dev Explorer"," on the App Store and ",[483,491,494],{"href":492,"rel":493},"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.funcs.io.lynx.go",[487],"on Google Play",", and it scans the QR code your dev server prints. The Lynx team publishes LynxExplorer builds on the ",[483,497,500],{"href":498,"rel":499},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx",[487],"lynx-family\u002Flynx"," releases page that do the same job, and I use Lynx Go because it installs from a store rather than a sideloaded ",[470,503,504],{},".ipa",".",[475,507,509],{"id":508},"wiring-up-the-qr-code","Wiring up the QR code",[466,511,512,515,516,519],{},[470,513,514],{},"@lynx-js\u002Fqrcode-rsbuild-plugin"," prints a scannable code whenever ",[470,517,518],{},"rspeedy dev"," starts. Add it alongside the Vue plugin:",[521,522,528],"pre",{"className":523,"code":524,"filename":525,"language":526,"meta":527,"style":527},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { defineConfig } from '@lynx-js\u002Frspeedy'\nimport { pluginQRCode } from '@lynx-js\u002Fqrcode-rsbuild-plugin'\nimport { pluginVueLynx } from 'vue-lynx\u002Fplugin'\n\nexport default defineConfig({\n  environments: {\n    lynx: {},\n    web: {},\n  },\n  source: {\n    entry: { main: '.\u002Fsrc\u002Findex.ts' },\n  },\n  plugins: [\n    pluginQRCode({\n      schema(url) {\n        return `${url}?fullscreen=true`\n      },\n    }),\n    pluginVueLynx({\n      includeWorkletPackages: [\u002F@vyui\\\u002F\u002F],\n    }),\n  ],\n})\n","lynx.config.ts","ts","",[470,529,530,563,583,604,611,629,642,653,663,669,679,705,710,721,731,748,768,774,785,795,822,831,839],{"__ignoreMap":527},[531,532,535,539,543,547,550,553,556,560],"span",{"class":533,"line":534},"line",1,[531,536,538],{"class":537},"s7zQu","import",[531,540,542],{"class":541},"sMK4o"," {",[531,544,546],{"class":545},"sTEyZ"," defineConfig",[531,548,549],{"class":541}," }",[531,551,552],{"class":537}," from",[531,554,555],{"class":541}," '",[531,557,559],{"class":558},"sfazB","@lynx-js\u002Frspeedy",[531,561,562],{"class":541},"'\n",[531,564,566,568,570,573,575,577,579,581],{"class":533,"line":565},2,[531,567,538],{"class":537},[531,569,542],{"class":541},[531,571,572],{"class":545}," pluginQRCode",[531,574,549],{"class":541},[531,576,552],{"class":537},[531,578,555],{"class":541},[531,580,514],{"class":558},[531,582,562],{"class":541},[531,584,586,588,590,593,595,597,599,602],{"class":533,"line":585},3,[531,587,538],{"class":537},[531,589,542],{"class":541},[531,591,592],{"class":545}," pluginVueLynx",[531,594,549],{"class":541},[531,596,552],{"class":537},[531,598,555],{"class":541},[531,600,601],{"class":558},"vue-lynx\u002Fplugin",[531,603,562],{"class":541},[531,605,607],{"class":533,"line":606},4,[531,608,610],{"emptyLinePlaceholder":609},true,"\n",[531,612,614,617,620,623,626],{"class":533,"line":613},5,[531,615,616],{"class":537},"export",[531,618,619],{"class":537}," default",[531,621,546],{"class":622},"s2Zo4",[531,624,625],{"class":545},"(",[531,627,628],{"class":541},"{\n",[531,630,632,636,639],{"class":533,"line":631},6,[531,633,635],{"class":634},"swJcz","  environments",[531,637,638],{"class":541},":",[531,640,641],{"class":541}," {\n",[531,643,645,648,650],{"class":533,"line":644},7,[531,646,647],{"class":634},"    lynx",[531,649,638],{"class":541},[531,651,652],{"class":541}," {},\n",[531,654,656,659,661],{"class":533,"line":655},8,[531,657,658],{"class":634},"    web",[531,660,638],{"class":541},[531,662,652],{"class":541},[531,664,666],{"class":533,"line":665},9,[531,667,668],{"class":541},"  },\n",[531,670,672,675,677],{"class":533,"line":671},10,[531,673,674],{"class":634},"  source",[531,676,638],{"class":541},[531,678,641],{"class":541},[531,680,682,685,687,689,692,694,696,699,702],{"class":533,"line":681},11,[531,683,684],{"class":634},"    entry",[531,686,638],{"class":541},[531,688,542],{"class":541},[531,690,691],{"class":634}," main",[531,693,638],{"class":541},[531,695,555],{"class":541},[531,697,698],{"class":558},".\u002Fsrc\u002Findex.ts",[531,700,701],{"class":541},"'",[531,703,704],{"class":541}," },\n",[531,706,708],{"class":533,"line":707},12,[531,709,668],{"class":541},[531,711,713,716,718],{"class":533,"line":712},13,[531,714,715],{"class":634},"  plugins",[531,717,638],{"class":541},[531,719,720],{"class":545}," [\n",[531,722,724,727,729],{"class":533,"line":723},14,[531,725,726],{"class":622},"    pluginQRCode",[531,728,625],{"class":545},[531,730,628],{"class":541},[531,732,734,737,739,743,746],{"class":533,"line":733},15,[531,735,736],{"class":634},"      schema",[531,738,625],{"class":541},[531,740,742],{"class":741},"sHdIc","url",[531,744,745],{"class":541},")",[531,747,641],{"class":541},[531,749,751,754,757,759,762,765],{"class":533,"line":750},16,[531,752,753],{"class":537},"        return",[531,755,756],{"class":541}," `${",[531,758,742],{"class":545},[531,760,761],{"class":541},"}",[531,763,764],{"class":558},"?fullscreen=true",[531,766,767],{"class":541},"`\n",[531,769,771],{"class":533,"line":770},17,[531,772,773],{"class":541},"      },\n",[531,775,777,780,782],{"class":533,"line":776},18,[531,778,779],{"class":541},"    }",[531,781,745],{"class":545},[531,783,784],{"class":541},",\n",[531,786,788,791,793],{"class":533,"line":787},19,[531,789,790],{"class":622},"    pluginVueLynx",[531,792,625],{"class":545},[531,794,628],{"class":541},[531,796,798,801,803,806,809,812,815,817,820],{"class":533,"line":797},20,[531,799,800],{"class":634},"      includeWorkletPackages",[531,802,638],{"class":541},[531,804,805],{"class":545}," [",[531,807,808],{"class":541},"\u002F",[531,810,811],{"class":558},"@vyui",[531,813,814],{"class":545},"\\\u002F",[531,816,808],{"class":541},[531,818,819],{"class":545},"]",[531,821,784],{"class":541},[531,823,825,827,829],{"class":533,"line":824},21,[531,826,779],{"class":541},[531,828,745],{"class":545},[531,830,784],{"class":541},[531,832,834,837],{"class":533,"line":833},22,[531,835,836],{"class":545},"  ]",[531,838,784],{"class":541},[531,840,842,844],{"class":533,"line":841},23,[531,843,761],{"class":541},[531,845,846],{"class":545},")\n",[466,848,849,850,853,854,857,858,853,861,864,865,867,868,870],{},"Both environments have to be there, because ",[470,851,852],{},"lynx"," emits ",[470,855,856],{},"main.lynx.bundle",", which is what the QR code points at and Lynx Go loads, while ",[470,859,860],{},"web",[470,862,863],{},"main.web.bundle"," for the browser preview. Dropping ",[470,866,860],{}," costs the browser shell, and dropping ",[470,869,852],{}," leaves the QR code pointing at nothing.",[466,872,873,874,877,878,881],{},"Run ",[470,875,876],{},"pnpm dev"," and scan the code, and saves reload the app in place. The ",[483,879,880],{"href":448},"dev server guide"," covers the terminal shortcuts that cycle the code between entries and URL schemas.",[475,883,885],{"id":884},"three-things-that-break-before-anything-renders","Three things that break before anything renders",[466,887,888],{},"A first device run usually fails in one of three ways, all of them build configuration the browser preview forgives.",[466,890,891,895,896,899,900,903,904,907,908,911,912,914,915,918,919,922],{},[892,893,894],"strong",{},"Gestures crash the main thread."," Dragging a ",[470,897,898],{},"VySortable"," or a ",[470,901,902],{},"VySwipeAction"," throws ",[470,905,906],{},"TypeError: cannot read property 'bind' of undefined",", because vue-lynx's main-thread loader skips ",[470,909,910],{},"node_modules"," unless you allowlist the package, so the worklets inside ",[470,913,41],{}," never register. The ",[470,916,917],{},"includeWorkletPackages"," entry above fixes it, and ",[470,920,921],{},"npx @vyui\u002Fcli check"," catches it before you reach a device.",[466,924,925,928,929,932,933,935,936,938,939,941],{},[892,926,927],{},"Components render as unstyled boxes."," Tailwind rebuilds its ",[470,930,931],{},"content"," list from the bundled module graph, and the common configuration excludes all of ",[470,934,910],{},", which drops every class string inside ",[470,937,46],{},". Let the Vy UI packages back through, and see ",[483,940,451],{"href":452}," for the version constraint behind this:",[521,943,945],{"className":523,"code":944,"filename":525,"language":526,"meta":527,"style":527},"pluginTailwindCSS({\n  config: 'tailwind.config.ts',\n  exclude: [\u002F[\\\\\u002F]node_modules[\\\\\u002F](?!.*@vyui)\u002F],\n})\n",[470,946,947,956,972,1017],{"__ignoreMap":527},[531,948,949,952,954],{"class":533,"line":534},[531,950,951],{"class":622},"pluginTailwindCSS",[531,953,625],{"class":545},[531,955,628],{"class":541},[531,957,958,961,963,965,968,970],{"class":533,"line":565},[531,959,960],{"class":634},"  config",[531,962,638],{"class":541},[531,964,555],{"class":541},[531,966,967],{"class":558},"tailwind.config.ts",[531,969,701],{"class":541},[531,971,784],{"class":541},[531,973,974,977,979,981,984,987,989,991,993,996,998,1000,1003,1005,1008,1010,1013,1015],{"class":533,"line":585},[531,975,976],{"class":634},"  exclude",[531,978,638],{"class":541},[531,980,805],{"class":545},[531,982,983],{"class":541},"\u002F[",[531,985,986],{"class":545},"\\\\",[531,988,808],{"class":558},[531,990,819],{"class":541},[531,992,910],{"class":558},[531,994,995],{"class":541},"[",[531,997,986],{"class":545},[531,999,808],{"class":558},[531,1001,1002],{"class":541},"](?!",[531,1004,505],{"class":558},[531,1006,1007],{"class":541},"*",[531,1009,811],{"class":558},[531,1011,1012],{"class":541},")\u002F",[531,1014,819],{"class":545},[531,1016,784],{"class":541},[531,1018,1019,1021],{"class":533,"line":606},[531,1020,761],{"class":541},[531,1022,846],{"class":545},[466,1024,1025,1028,1029,1032,1033,1036],{},[892,1026,1027],{},"Colors collapse to white and black."," Lynx's native CSS engine resolves a single level of ",[470,1030,1031],{},"var()"," indirection, so a semantic token pointing at another token evaluates to nothing on device while working in the browser. CSS inheritance and inline variables make the ",[470,1034,1035],{},"--ui-*"," token layer resolve natively:",[521,1038,1040],{"className":523,"code":1039,"filename":525,"language":526,"meta":527,"style":527},"pluginVueLynx({\n  enableCSSInheritance: true,\n  enableCSSInlineVariables: true,\n  includeWorkletPackages: [\u002F@vyui\\\u002F\u002F],\n})\n",[470,1041,1042,1051,1064,1075,1096],{"__ignoreMap":527},[531,1043,1044,1047,1049],{"class":533,"line":534},[531,1045,1046],{"class":622},"pluginVueLynx",[531,1048,625],{"class":545},[531,1050,628],{"class":541},[531,1052,1053,1056,1058,1062],{"class":533,"line":565},[531,1054,1055],{"class":634},"  enableCSSInheritance",[531,1057,638],{"class":541},[531,1059,1061],{"class":1060},"sfNiH"," true",[531,1063,784],{"class":541},[531,1065,1066,1069,1071,1073],{"class":533,"line":585},[531,1067,1068],{"class":634},"  enableCSSInlineVariables",[531,1070,638],{"class":541},[531,1072,1061],{"class":1060},[531,1074,784],{"class":541},[531,1076,1077,1080,1082,1084,1086,1088,1090,1092,1094],{"class":533,"line":606},[531,1078,1079],{"class":634},"  includeWorkletPackages",[531,1081,638],{"class":541},[531,1083,805],{"class":545},[531,1085,808],{"class":541},[531,1087,811],{"class":558},[531,1089,814],{"class":545},[531,1091,808],{"class":541},[531,1093,819],{"class":545},[531,1095,784],{"class":541},[531,1097,1098,1100],{"class":533,"line":613},[531,1099,761],{"class":541},[531,1101,846],{"class":545},[475,1103,323],{"id":1104},"fonts",[466,1106,1107,1108,1111,1112,1115],{},"Custom fonts loaded with ",[470,1109,1110],{},"url(...)"," do not work in a native bundle, because rspeedy rewrites the reference to ",[470,1113,1114],{},"webpack:\u002F\u002F\u002Fstatic\u002Ffont\u002F…"," and native Lynx cannot fetch that scheme, so the text falls back to a system face without logging anything. Inlining the font as a data URI keeps it inside the bundle and costs one config change:",[521,1117,1119],{"className":523,"code":1118,"filename":525,"language":526,"meta":527,"style":527},"output: {\n  dataUriLimit: {\n    font: Number.MAX_SAFE_INTEGER,\n  },\n}\n",[470,1120,1121,1131,1140,1157,1161],{"__ignoreMap":527},[531,1122,1123,1127,1129],{"class":533,"line":534},[531,1124,1126],{"class":1125},"sBMFI","output",[531,1128,638],{"class":541},[531,1130,641],{"class":541},[531,1132,1133,1136,1138],{"class":533,"line":565},[531,1134,1135],{"class":1125},"  dataUriLimit",[531,1137,638],{"class":541},[531,1139,641],{"class":541},[531,1141,1142,1145,1147,1150,1152,1155],{"class":533,"line":585},[531,1143,1144],{"class":1125},"    font",[531,1146,638],{"class":541},[531,1148,1149],{"class":545}," Number",[531,1151,505],{"class":541},[531,1153,1154],{"class":634},"MAX_SAFE_INTEGER",[531,1156,784],{"class":541},[531,1158,1159],{"class":533,"line":606},[531,1160,668],{"class":541},[531,1162,1163],{"class":533,"line":613},[531,1164,1165],{"class":541},"}\n",[466,1167,1168,1169,1172],{},"The alternative registers the font in a host application and references it as ",[470,1170,1171],{},"local(\"Family Name\")",", which is smaller and rules out Lynx Go, since you cannot add resources to an app you did not build.",[475,1174,1176],{"id":1175},"reaching-a-local-api","Reaching a local API",[466,1178,1179,1180,1183,1184,1187],{},"Lynx Go loads your bundle over the network, so ",[470,1181,1182],{},"localhost"," inside that bundle means the phone rather than your Mac. Native bundles also have no ",[470,1185,1186],{},"location"," global, so the code cannot infer the dev machine's address, and inlining the LAN IP at build time is the least painful fix I have found:",[521,1189,1191],{"className":523,"code":1190,"filename":525,"language":526,"meta":527,"style":527},"import { networkInterfaces } from 'node:os'\n\nfunction lanHost(): string {\n  for (const nets of Object.values(networkInterfaces())) {\n    for (const net of nets ?? []) {\n      if (net.family === 'IPv4' && !net.internal) return net.address\n    }\n  }\n  return 'localhost'\n}\n\nexport default defineConfig({\n  source: {\n    define: {\n      'import.meta.env.PUBLIC_DEV_LAN_HOST': JSON.stringify(lanHost()),\n    },\n  },\n})\n",[470,1192,1193,1213,1217,1234,1269,1293,1344,1349,1354,1365,1369,1373,1385,1393,1402,1432,1437,1441],{"__ignoreMap":527},[531,1194,1195,1197,1199,1202,1204,1206,1208,1211],{"class":533,"line":534},[531,1196,538],{"class":537},[531,1198,542],{"class":541},[531,1200,1201],{"class":545}," networkInterfaces",[531,1203,549],{"class":541},[531,1205,552],{"class":537},[531,1207,555],{"class":541},[531,1209,1210],{"class":558},"node:os",[531,1212,562],{"class":541},[531,1214,1215],{"class":533,"line":565},[531,1216,610],{"emptyLinePlaceholder":609},[531,1218,1219,1223,1226,1229,1232],{"class":533,"line":585},[531,1220,1222],{"class":1221},"spNyl","function",[531,1224,1225],{"class":622}," lanHost",[531,1227,1228],{"class":541},"():",[531,1230,1231],{"class":1125}," string",[531,1233,641],{"class":541},[531,1235,1236,1239,1242,1245,1248,1251,1254,1256,1259,1261,1264,1267],{"class":533,"line":606},[531,1237,1238],{"class":537},"  for",[531,1240,1241],{"class":634}," (",[531,1243,1244],{"class":1221},"const",[531,1246,1247],{"class":545}," nets",[531,1249,1250],{"class":541}," of",[531,1252,1253],{"class":545}," Object",[531,1255,505],{"class":541},[531,1257,1258],{"class":622},"values",[531,1260,625],{"class":634},[531,1262,1263],{"class":622},"networkInterfaces",[531,1265,1266],{"class":634},"())) ",[531,1268,628],{"class":541},[531,1270,1271,1274,1276,1278,1281,1283,1285,1288,1291],{"class":533,"line":613},[531,1272,1273],{"class":537},"    for",[531,1275,1241],{"class":634},[531,1277,1244],{"class":1221},[531,1279,1280],{"class":545}," net",[531,1282,1250],{"class":541},[531,1284,1247],{"class":545},[531,1286,1287],{"class":541}," ??",[531,1289,1290],{"class":634}," []) ",[531,1292,628],{"class":541},[531,1294,1295,1298,1300,1303,1305,1308,1311,1313,1316,1318,1321,1324,1326,1328,1331,1334,1337,1339,1341],{"class":533,"line":631},[531,1296,1297],{"class":537},"      if",[531,1299,1241],{"class":634},[531,1301,1302],{"class":545},"net",[531,1304,505],{"class":541},[531,1306,1307],{"class":545},"family",[531,1309,1310],{"class":541}," ===",[531,1312,555],{"class":541},[531,1314,1315],{"class":558},"IPv4",[531,1317,701],{"class":541},[531,1319,1320],{"class":541}," &&",[531,1322,1323],{"class":541}," !",[531,1325,1302],{"class":545},[531,1327,505],{"class":541},[531,1329,1330],{"class":545},"internal",[531,1332,1333],{"class":634},") ",[531,1335,1336],{"class":537},"return",[531,1338,1280],{"class":545},[531,1340,505],{"class":541},[531,1342,1343],{"class":545},"address\n",[531,1345,1346],{"class":533,"line":644},[531,1347,1348],{"class":541},"    }\n",[531,1350,1351],{"class":533,"line":655},[531,1352,1353],{"class":541},"  }\n",[531,1355,1356,1359,1361,1363],{"class":533,"line":665},[531,1357,1358],{"class":537},"  return",[531,1360,555],{"class":541},[531,1362,1182],{"class":558},[531,1364,562],{"class":541},[531,1366,1367],{"class":533,"line":671},[531,1368,1165],{"class":541},[531,1370,1371],{"class":533,"line":681},[531,1372,610],{"emptyLinePlaceholder":609},[531,1374,1375,1377,1379,1381,1383],{"class":533,"line":707},[531,1376,616],{"class":537},[531,1378,619],{"class":537},[531,1380,546],{"class":622},[531,1382,625],{"class":545},[531,1384,628],{"class":541},[531,1386,1387,1389,1391],{"class":533,"line":712},[531,1388,674],{"class":634},[531,1390,638],{"class":541},[531,1392,641],{"class":541},[531,1394,1395,1398,1400],{"class":533,"line":723},[531,1396,1397],{"class":634},"    define",[531,1399,638],{"class":541},[531,1401,641],{"class":541},[531,1403,1404,1407,1410,1412,1414,1417,1419,1422,1424,1427,1430],{"class":533,"line":733},[531,1405,1406],{"class":541},"      '",[531,1408,1409],{"class":634},"import.meta.env.PUBLIC_DEV_LAN_HOST",[531,1411,701],{"class":541},[531,1413,638],{"class":541},[531,1415,1416],{"class":545}," JSON",[531,1418,505],{"class":541},[531,1420,1421],{"class":622},"stringify",[531,1423,625],{"class":545},[531,1425,1426],{"class":622},"lanHost",[531,1428,1429],{"class":545},"())",[531,1431,784],{"class":541},[531,1433,1434],{"class":533,"line":750},[531,1435,1436],{"class":541},"    },\n",[531,1438,1439],{"class":533,"line":770},[531,1440,668],{"class":541},[531,1442,1443,1445],{"class":533,"line":776},[531,1444,761],{"class":541},[531,1446,846],{"class":545},[466,1448,1449,1450,1452,1453,1455],{},"Your API client then reads ",[470,1451,1409],{}," instead of assuming ",[470,1454,1182],{},", and changing networks means restarting the dev server, because the value is baked in at build time.",[475,1457,1459],{"id":1458},"where-lynx-go-runs-out","Where Lynx Go runs out",[466,1461,1462,1463,1466,1467,1470,1471,1474],{},"Lynx Go is a fixed application, so it contains exactly the native modules its authors compiled into it. Camera capture, biometrics, push notifications, secure keychain storage, and any third-party SDK are out of reach, along with ",[470,1464,1465],{},"UIAppFonts",", permission strings in ",[470,1468,1469],{},"Info.plist",", URL scheme handling, and app-level entitlements. All of that lives in a host application you control, and the ",[483,1472,1473],{"href":443},"Xcode guide"," walks through building one.",[1476,1477,1479],"callout",{"icon":1478},"i-lucide-info",[466,1480,1481],{},"Lynx Go stays the right tool for layout, styling, animation, gesture feel, and anything else that only needs the runtime. I keep using it for the fast loop long after a custom host exists.",[475,1483,1485],{"id":1484},"related","Related",[1487,1488,1489,1495,1500],"card-group",{},[1490,1491,1492],"card",{"icon":445,"title":442,"to":443},[466,1493,1494],{},"Build an iOS host app that loads your bundle and compiles in native modules.",[1490,1496,1497],{"icon":17,"title":14,"to":15},[466,1498,1499],{},"The full Vy UI setup, including Tailwind and worklet configuration.",[1490,1501,1502],{"icon":431,"title":428,"to":429},[466,1503,1504],{},"The Vue renderer for Lynx and what changes in your code.",[1506,1507,1508],"style",{},"html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":527,"searchDepth":534,"depth":565,"links":1510},[1511,1512,1513,1514,1515,1516,1517],{"id":477,"depth":565,"text":478},{"id":508,"depth":565,"text":509},{"id":884,"depth":565,"text":885},{"id":1104,"depth":565,"text":323},{"id":1175,"depth":565,"text":1176},{"id":1458,"depth":565,"text":1459},{"id":1484,"depth":565,"text":1485},"How to run a Vue Lynx app on a real iPhone or Android device with Lynx Go, and where the QR-code workflow stops being enough.","md",{},{"icon":84},{"title":1523,"description":1524},"Testing a Vue Lynx app on your phone with Lynx Go","Run a Vue Lynx app on a real device by scanning the rspeedy dev server QR code with Lynx Go, plus the Vy UI configuration that has to be right before anything renders.","l9FUwL9sAO9X7OiHR6iXF2xLzqD6RoBh7bAFcv-eXkw",[1527,1529],{"title":433,"path":434,"stem":435,"description":1528,"icon":-1,"children":-1,"navigation":-1},"How Lynx and React Native differ in threading model, styling, framework support, and ecosystem maturity, and which one fits a given project.",{"title":442,"path":443,"stem":444,"description":1530,"icon":-1,"children":-1,"navigation":-1},"Build a minimal iOS host app that embeds the Lynx runtime, loads your bundle from the dev server, and compiles in the native modules Lynx Go cannot provide.",1785060130293]