[{"data":1,"prerenderedAt":1526},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Ftesting-on-device":455,"\u002Fguides\u002Ftesting-on-device-surround":1521},[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,436,441,445,450],{"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},"Lynx UI frameworks","\u002Fguides\u002Flynx-ui-frameworks","8.guides\u002F2.lynx-ui-frameworks","i-lucide-library",{"title":423,"path":424,"stem":425,"package":11,"icon":426},"What is Vue Lynx","\u002Fguides\u002Fvue-lynx","8.guides\u002F3.vue-lynx","i-lucide-component",{"title":428,"path":429,"stem":430,"package":11,"icon":431},"Lynx vs React Native","\u002Fguides\u002Flynx-vs-react-native","8.guides\u002F4.lynx-vs-react-native","i-lucide-git-compare",{"title":433,"path":434,"stem":435,"package":11,"icon":84},"Testing on your phone","\u002Fguides\u002Ftesting-on-device","8.guides\u002F5.testing-on-device",{"title":437,"path":438,"stem":439,"package":11,"icon":440},"Testing with Xcode","\u002Fguides\u002Ftesting-with-xcode","8.guides\u002F6.testing-with-xcode","i-lucide-apple",{"title":442,"path":443,"stem":444,"package":11,"icon":27},"The rspeedy dev server","\u002Fguides\u002Frspeedy-dev-server","8.guides\u002F7.rspeedy-dev-server",{"title":446,"path":447,"stem":448,"package":11,"icon":449},"Tailwind on Lynx","\u002Fguides\u002Ftailwind-on-lynx","8.guides\u002F8.tailwind-on-lynx","i-lucide-wind",{"title":451,"path":452,"stem":453,"package":11,"icon":454},"Theming on Lynx","\u002Fguides\u002Ftheming-on-lynx","8.guides\u002F9.theming-on-lynx","i-lucide-paintbrush",{"id":456,"title":433,"body":457,"description":1513,"extension":1514,"links":11,"meta":1515,"navigation":1516,"package":11,"path":434,"seo":1517,"stem":435,"__hash__":1520},"docs\u002F8.guides\u002F5.testing-on-device.md",{"type":458,"value":459,"toc":1504},"minimark",[460,469,474,501,505,515,842,866,877,881,884,918,937,1018,1032,1097,1100,1111,1161,1168,1172,1183,1442,1451,1455,1470,1477,1481,1500],[461,462,463,464,468],"p",{},"The browser preview rspeedy prints is the one target where Lynx behaves least like itself. Gestures run through mouse events rather than touch, ",[465,466,467],"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.",[470,471,473],"h2",{"id":472},"lynx-go","Lynx Go",[461,475,476,477,484,485,490,491,496,497,500],{},"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 ",[478,479,483],"a",{"href":480,"rel":481},"https:\u002F\u002Fapps.apple.com\u002Fus\u002Fapp\u002Flynx-go-dev-explorer\u002Fid6743227790",[482],"nofollow","Lynx Go — Dev Explorer"," on the App Store and ",[478,486,489],{"href":487,"rel":488},"https:\u002F\u002Fplay.google.com\u002Fstore\u002Fapps\u002Fdetails?id=com.funcs.io.lynx.go",[482],"on Google Play",", and it scans the QR code your dev server prints. The Lynx team publishes LynxExplorer builds on the ",[478,492,495],{"href":493,"rel":494},"https:\u002F\u002Fgithub.com\u002Flynx-family\u002Flynx",[482],"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 ",[465,498,499],{},".ipa",".",[470,502,504],{"id":503},"wiring-up-the-qr-code","Wiring up the QR code",[461,506,507,510,511,514],{},[465,508,509],{},"@lynx-js\u002Fqrcode-rsbuild-plugin"," prints a scannable code whenever ",[465,512,513],{},"rspeedy dev"," starts. Add it alongside the Vue plugin:",[516,517,523],"pre",{"className":518,"code":519,"filename":520,"language":521,"meta":522,"style":522},"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","",[465,524,525,558,578,599,606,624,637,648,658,664,674,700,705,716,726,743,763,769,780,790,817,826,834],{"__ignoreMap":522},[526,527,530,534,538,542,545,548,551,555],"span",{"class":528,"line":529},"line",1,[526,531,533],{"class":532},"s7zQu","import",[526,535,537],{"class":536},"sMK4o"," {",[526,539,541],{"class":540},"sTEyZ"," defineConfig",[526,543,544],{"class":536}," }",[526,546,547],{"class":532}," from",[526,549,550],{"class":536}," '",[526,552,554],{"class":553},"sfazB","@lynx-js\u002Frspeedy",[526,556,557],{"class":536},"'\n",[526,559,561,563,565,568,570,572,574,576],{"class":528,"line":560},2,[526,562,533],{"class":532},[526,564,537],{"class":536},[526,566,567],{"class":540}," pluginQRCode",[526,569,544],{"class":536},[526,571,547],{"class":532},[526,573,550],{"class":536},[526,575,509],{"class":553},[526,577,557],{"class":536},[526,579,581,583,585,588,590,592,594,597],{"class":528,"line":580},3,[526,582,533],{"class":532},[526,584,537],{"class":536},[526,586,587],{"class":540}," pluginVueLynx",[526,589,544],{"class":536},[526,591,547],{"class":532},[526,593,550],{"class":536},[526,595,596],{"class":553},"vue-lynx\u002Fplugin",[526,598,557],{"class":536},[526,600,602],{"class":528,"line":601},4,[526,603,605],{"emptyLinePlaceholder":604},true,"\n",[526,607,609,612,615,618,621],{"class":528,"line":608},5,[526,610,611],{"class":532},"export",[526,613,614],{"class":532}," default",[526,616,541],{"class":617},"s2Zo4",[526,619,620],{"class":540},"(",[526,622,623],{"class":536},"{\n",[526,625,627,631,634],{"class":528,"line":626},6,[526,628,630],{"class":629},"swJcz","  environments",[526,632,633],{"class":536},":",[526,635,636],{"class":536}," {\n",[526,638,640,643,645],{"class":528,"line":639},7,[526,641,642],{"class":629},"    lynx",[526,644,633],{"class":536},[526,646,647],{"class":536}," {},\n",[526,649,651,654,656],{"class":528,"line":650},8,[526,652,653],{"class":629},"    web",[526,655,633],{"class":536},[526,657,647],{"class":536},[526,659,661],{"class":528,"line":660},9,[526,662,663],{"class":536},"  },\n",[526,665,667,670,672],{"class":528,"line":666},10,[526,668,669],{"class":629},"  source",[526,671,633],{"class":536},[526,673,636],{"class":536},[526,675,677,680,682,684,687,689,691,694,697],{"class":528,"line":676},11,[526,678,679],{"class":629},"    entry",[526,681,633],{"class":536},[526,683,537],{"class":536},[526,685,686],{"class":629}," main",[526,688,633],{"class":536},[526,690,550],{"class":536},[526,692,693],{"class":553},".\u002Fsrc\u002Findex.ts",[526,695,696],{"class":536},"'",[526,698,699],{"class":536}," },\n",[526,701,703],{"class":528,"line":702},12,[526,704,663],{"class":536},[526,706,708,711,713],{"class":528,"line":707},13,[526,709,710],{"class":629},"  plugins",[526,712,633],{"class":536},[526,714,715],{"class":540}," [\n",[526,717,719,722,724],{"class":528,"line":718},14,[526,720,721],{"class":617},"    pluginQRCode",[526,723,620],{"class":540},[526,725,623],{"class":536},[526,727,729,732,734,738,741],{"class":528,"line":728},15,[526,730,731],{"class":629},"      schema",[526,733,620],{"class":536},[526,735,737],{"class":736},"sHdIc","url",[526,739,740],{"class":536},")",[526,742,636],{"class":536},[526,744,746,749,752,754,757,760],{"class":528,"line":745},16,[526,747,748],{"class":532},"        return",[526,750,751],{"class":536}," `${",[526,753,737],{"class":540},[526,755,756],{"class":536},"}",[526,758,759],{"class":553},"?fullscreen=true",[526,761,762],{"class":536},"`\n",[526,764,766],{"class":528,"line":765},17,[526,767,768],{"class":536},"      },\n",[526,770,772,775,777],{"class":528,"line":771},18,[526,773,774],{"class":536},"    }",[526,776,740],{"class":540},[526,778,779],{"class":536},",\n",[526,781,783,786,788],{"class":528,"line":782},19,[526,784,785],{"class":617},"    pluginVueLynx",[526,787,620],{"class":540},[526,789,623],{"class":536},[526,791,793,796,798,801,804,807,810,812,815],{"class":528,"line":792},20,[526,794,795],{"class":629},"      includeWorkletPackages",[526,797,633],{"class":536},[526,799,800],{"class":540}," [",[526,802,803],{"class":536},"\u002F",[526,805,806],{"class":553},"@vyui",[526,808,809],{"class":540},"\\\u002F",[526,811,803],{"class":536},[526,813,814],{"class":540},"]",[526,816,779],{"class":536},[526,818,820,822,824],{"class":528,"line":819},21,[526,821,774],{"class":536},[526,823,740],{"class":540},[526,825,779],{"class":536},[526,827,829,832],{"class":528,"line":828},22,[526,830,831],{"class":540},"  ]",[526,833,779],{"class":536},[526,835,837,839],{"class":528,"line":836},23,[526,838,756],{"class":536},[526,840,841],{"class":540},")\n",[461,843,844,845,848,849,852,853,848,856,859,860,862,863,865],{},"Both environments have to be there, because ",[465,846,847],{},"lynx"," emits ",[465,850,851],{},"main.lynx.bundle",", which is what the QR code points at and Lynx Go loads, while ",[465,854,855],{},"web",[465,857,858],{},"main.web.bundle"," for the browser preview. Dropping ",[465,861,855],{}," costs the browser shell, and dropping ",[465,864,847],{}," leaves the QR code pointing at nothing.",[461,867,868,869,872,873,876],{},"Run ",[465,870,871],{},"pnpm dev"," and scan the code, and saves reload the app in place. The ",[478,874,875],{"href":443},"dev server guide"," covers the terminal shortcuts that cycle the code between entries and URL schemas.",[470,878,880],{"id":879},"three-things-that-break-before-anything-renders","Three things that break before anything renders",[461,882,883],{},"A first device run usually fails in one of three ways, all of them build configuration the browser preview forgives.",[461,885,886,890,891,894,895,898,899,902,903,906,907,909,910,913,914,917],{},[887,888,889],"strong",{},"Gestures crash the main thread."," Dragging a ",[465,892,893],{},"VySortable"," or a ",[465,896,897],{},"VySwipeAction"," throws ",[465,900,901],{},"TypeError: cannot read property 'bind' of undefined",", because vue-lynx's main-thread loader skips ",[465,904,905],{},"node_modules"," unless you allowlist the package, so the worklets inside ",[465,908,41],{}," never register. The ",[465,911,912],{},"includeWorkletPackages"," entry above fixes it, and ",[465,915,916],{},"npx @vyui\u002Fcli check"," catches it before you reach a device.",[461,919,920,923,924,927,928,930,931,933,934,936],{},[887,921,922],{},"Components render as unstyled boxes."," Tailwind rebuilds its ",[465,925,926],{},"content"," list from the bundled module graph, and the common configuration excludes all of ",[465,929,905],{},", which drops every class string inside ",[465,932,46],{},". Let the Vy UI packages back through, and see ",[478,935,446],{"href":447}," for the version constraint behind this:",[516,938,940],{"className":518,"code":939,"filename":520,"language":521,"meta":522,"style":522},"pluginTailwindCSS({\n  config: 'tailwind.config.ts',\n  exclude: [\u002F[\\\\\u002F]node_modules[\\\\\u002F](?!.*@vyui)\u002F],\n})\n",[465,941,942,951,967,1012],{"__ignoreMap":522},[526,943,944,947,949],{"class":528,"line":529},[526,945,946],{"class":617},"pluginTailwindCSS",[526,948,620],{"class":540},[526,950,623],{"class":536},[526,952,953,956,958,960,963,965],{"class":528,"line":560},[526,954,955],{"class":629},"  config",[526,957,633],{"class":536},[526,959,550],{"class":536},[526,961,962],{"class":553},"tailwind.config.ts",[526,964,696],{"class":536},[526,966,779],{"class":536},[526,968,969,972,974,976,979,982,984,986,988,991,993,995,998,1000,1003,1005,1008,1010],{"class":528,"line":580},[526,970,971],{"class":629},"  exclude",[526,973,633],{"class":536},[526,975,800],{"class":540},[526,977,978],{"class":536},"\u002F[",[526,980,981],{"class":540},"\\\\",[526,983,803],{"class":553},[526,985,814],{"class":536},[526,987,905],{"class":553},[526,989,990],{"class":536},"[",[526,992,981],{"class":540},[526,994,803],{"class":553},[526,996,997],{"class":536},"](?!",[526,999,500],{"class":553},[526,1001,1002],{"class":536},"*",[526,1004,806],{"class":553},[526,1006,1007],{"class":536},")\u002F",[526,1009,814],{"class":540},[526,1011,779],{"class":536},[526,1013,1014,1016],{"class":528,"line":601},[526,1015,756],{"class":536},[526,1017,841],{"class":540},[461,1019,1020,1023,1024,1027,1028,1031],{},[887,1021,1022],{},"Colors collapse to white and black."," Lynx's native CSS engine resolves a single level of ",[465,1025,1026],{},"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 ",[465,1029,1030],{},"--ui-*"," token layer resolve natively:",[516,1033,1035],{"className":518,"code":1034,"filename":520,"language":521,"meta":522,"style":522},"pluginVueLynx({\n  enableCSSInheritance: true,\n  enableCSSInlineVariables: true,\n  includeWorkletPackages: [\u002F@vyui\\\u002F\u002F],\n})\n",[465,1036,1037,1046,1059,1070,1091],{"__ignoreMap":522},[526,1038,1039,1042,1044],{"class":528,"line":529},[526,1040,1041],{"class":617},"pluginVueLynx",[526,1043,620],{"class":540},[526,1045,623],{"class":536},[526,1047,1048,1051,1053,1057],{"class":528,"line":560},[526,1049,1050],{"class":629},"  enableCSSInheritance",[526,1052,633],{"class":536},[526,1054,1056],{"class":1055},"sfNiH"," true",[526,1058,779],{"class":536},[526,1060,1061,1064,1066,1068],{"class":528,"line":580},[526,1062,1063],{"class":629},"  enableCSSInlineVariables",[526,1065,633],{"class":536},[526,1067,1056],{"class":1055},[526,1069,779],{"class":536},[526,1071,1072,1075,1077,1079,1081,1083,1085,1087,1089],{"class":528,"line":601},[526,1073,1074],{"class":629},"  includeWorkletPackages",[526,1076,633],{"class":536},[526,1078,800],{"class":540},[526,1080,803],{"class":536},[526,1082,806],{"class":553},[526,1084,809],{"class":540},[526,1086,803],{"class":536},[526,1088,814],{"class":540},[526,1090,779],{"class":536},[526,1092,1093,1095],{"class":528,"line":608},[526,1094,756],{"class":536},[526,1096,841],{"class":540},[470,1098,323],{"id":1099},"fonts",[461,1101,1102,1103,1106,1107,1110],{},"Custom fonts loaded with ",[465,1104,1105],{},"url(...)"," do not work in a native bundle, because rspeedy rewrites the reference to ",[465,1108,1109],{},"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:",[516,1112,1114],{"className":518,"code":1113,"filename":520,"language":521,"meta":522,"style":522},"output: {\n  dataUriLimit: {\n    font: Number.MAX_SAFE_INTEGER,\n  },\n}\n",[465,1115,1116,1126,1135,1152,1156],{"__ignoreMap":522},[526,1117,1118,1122,1124],{"class":528,"line":529},[526,1119,1121],{"class":1120},"sBMFI","output",[526,1123,633],{"class":536},[526,1125,636],{"class":536},[526,1127,1128,1131,1133],{"class":528,"line":560},[526,1129,1130],{"class":1120},"  dataUriLimit",[526,1132,633],{"class":536},[526,1134,636],{"class":536},[526,1136,1137,1140,1142,1145,1147,1150],{"class":528,"line":580},[526,1138,1139],{"class":1120},"    font",[526,1141,633],{"class":536},[526,1143,1144],{"class":540}," Number",[526,1146,500],{"class":536},[526,1148,1149],{"class":629},"MAX_SAFE_INTEGER",[526,1151,779],{"class":536},[526,1153,1154],{"class":528,"line":601},[526,1155,663],{"class":536},[526,1157,1158],{"class":528,"line":608},[526,1159,1160],{"class":536},"}\n",[461,1162,1163,1164,1167],{},"The alternative registers the font in a host application and references it as ",[465,1165,1166],{},"local(\"Family Name\")",", which is smaller and rules out Lynx Go, since you cannot add resources to an app you did not build.",[470,1169,1171],{"id":1170},"reaching-a-local-api","Reaching a local API",[461,1173,1174,1175,1178,1179,1182],{},"Lynx Go loads your bundle over the network, so ",[465,1176,1177],{},"localhost"," inside that bundle means the phone rather than your Mac. Native bundles also have no ",[465,1180,1181],{},"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:",[516,1184,1186],{"className":518,"code":1185,"filename":520,"language":521,"meta":522,"style":522},"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",[465,1187,1188,1208,1212,1229,1264,1288,1339,1344,1349,1360,1364,1368,1380,1388,1397,1427,1432,1436],{"__ignoreMap":522},[526,1189,1190,1192,1194,1197,1199,1201,1203,1206],{"class":528,"line":529},[526,1191,533],{"class":532},[526,1193,537],{"class":536},[526,1195,1196],{"class":540}," networkInterfaces",[526,1198,544],{"class":536},[526,1200,547],{"class":532},[526,1202,550],{"class":536},[526,1204,1205],{"class":553},"node:os",[526,1207,557],{"class":536},[526,1209,1210],{"class":528,"line":560},[526,1211,605],{"emptyLinePlaceholder":604},[526,1213,1214,1218,1221,1224,1227],{"class":528,"line":580},[526,1215,1217],{"class":1216},"spNyl","function",[526,1219,1220],{"class":617}," lanHost",[526,1222,1223],{"class":536},"():",[526,1225,1226],{"class":1120}," string",[526,1228,636],{"class":536},[526,1230,1231,1234,1237,1240,1243,1246,1249,1251,1254,1256,1259,1262],{"class":528,"line":601},[526,1232,1233],{"class":532},"  for",[526,1235,1236],{"class":629}," (",[526,1238,1239],{"class":1216},"const",[526,1241,1242],{"class":540}," nets",[526,1244,1245],{"class":536}," of",[526,1247,1248],{"class":540}," Object",[526,1250,500],{"class":536},[526,1252,1253],{"class":617},"values",[526,1255,620],{"class":629},[526,1257,1258],{"class":617},"networkInterfaces",[526,1260,1261],{"class":629},"())) ",[526,1263,623],{"class":536},[526,1265,1266,1269,1271,1273,1276,1278,1280,1283,1286],{"class":528,"line":608},[526,1267,1268],{"class":532},"    for",[526,1270,1236],{"class":629},[526,1272,1239],{"class":1216},[526,1274,1275],{"class":540}," net",[526,1277,1245],{"class":536},[526,1279,1242],{"class":540},[526,1281,1282],{"class":536}," ??",[526,1284,1285],{"class":629}," []) ",[526,1287,623],{"class":536},[526,1289,1290,1293,1295,1298,1300,1303,1306,1308,1311,1313,1316,1319,1321,1323,1326,1329,1332,1334,1336],{"class":528,"line":626},[526,1291,1292],{"class":532},"      if",[526,1294,1236],{"class":629},[526,1296,1297],{"class":540},"net",[526,1299,500],{"class":536},[526,1301,1302],{"class":540},"family",[526,1304,1305],{"class":536}," ===",[526,1307,550],{"class":536},[526,1309,1310],{"class":553},"IPv4",[526,1312,696],{"class":536},[526,1314,1315],{"class":536}," &&",[526,1317,1318],{"class":536}," !",[526,1320,1297],{"class":540},[526,1322,500],{"class":536},[526,1324,1325],{"class":540},"internal",[526,1327,1328],{"class":629},") ",[526,1330,1331],{"class":532},"return",[526,1333,1275],{"class":540},[526,1335,500],{"class":536},[526,1337,1338],{"class":540},"address\n",[526,1340,1341],{"class":528,"line":639},[526,1342,1343],{"class":536},"    }\n",[526,1345,1346],{"class":528,"line":650},[526,1347,1348],{"class":536},"  }\n",[526,1350,1351,1354,1356,1358],{"class":528,"line":660},[526,1352,1353],{"class":532},"  return",[526,1355,550],{"class":536},[526,1357,1177],{"class":553},[526,1359,557],{"class":536},[526,1361,1362],{"class":528,"line":666},[526,1363,1160],{"class":536},[526,1365,1366],{"class":528,"line":676},[526,1367,605],{"emptyLinePlaceholder":604},[526,1369,1370,1372,1374,1376,1378],{"class":528,"line":702},[526,1371,611],{"class":532},[526,1373,614],{"class":532},[526,1375,541],{"class":617},[526,1377,620],{"class":540},[526,1379,623],{"class":536},[526,1381,1382,1384,1386],{"class":528,"line":707},[526,1383,669],{"class":629},[526,1385,633],{"class":536},[526,1387,636],{"class":536},[526,1389,1390,1393,1395],{"class":528,"line":718},[526,1391,1392],{"class":629},"    define",[526,1394,633],{"class":536},[526,1396,636],{"class":536},[526,1398,1399,1402,1405,1407,1409,1412,1414,1417,1419,1422,1425],{"class":528,"line":728},[526,1400,1401],{"class":536},"      '",[526,1403,1404],{"class":629},"import.meta.env.PUBLIC_DEV_LAN_HOST",[526,1406,696],{"class":536},[526,1408,633],{"class":536},[526,1410,1411],{"class":540}," JSON",[526,1413,500],{"class":536},[526,1415,1416],{"class":617},"stringify",[526,1418,620],{"class":540},[526,1420,1421],{"class":617},"lanHost",[526,1423,1424],{"class":540},"())",[526,1426,779],{"class":536},[526,1428,1429],{"class":528,"line":745},[526,1430,1431],{"class":536},"    },\n",[526,1433,1434],{"class":528,"line":765},[526,1435,663],{"class":536},[526,1437,1438,1440],{"class":528,"line":771},[526,1439,756],{"class":536},[526,1441,841],{"class":540},[461,1443,1444,1445,1447,1448,1450],{},"Your API client then reads ",[465,1446,1404],{}," instead of assuming ",[465,1449,1177],{},", and changing networks means restarting the dev server, because the value is baked in at build time.",[470,1452,1454],{"id":1453},"where-lynx-go-runs-out","Where Lynx Go runs out",[461,1456,1457,1458,1461,1462,1465,1466,1469],{},"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 ",[465,1459,1460],{},"UIAppFonts",", permission strings in ",[465,1463,1464],{},"Info.plist",", URL scheme handling, and app-level entitlements. All of that lives in a host application you control, and the ",[478,1467,1468],{"href":438},"Xcode guide"," walks through building one.",[1471,1472,1474],"callout",{"icon":1473},"i-lucide-info",[461,1475,1476],{},"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.",[470,1478,1480],{"id":1479},"related","Related",[1482,1483,1484,1490,1495],"card-group",{},[1485,1486,1487],"card",{"icon":440,"title":437,"to":438},[461,1488,1489],{},"Build an iOS host app that loads your bundle and compiles in native modules.",[1485,1491,1492],{"icon":17,"title":14,"to":15},[461,1493,1494],{},"The full Vy UI setup, including Tailwind and worklet configuration.",[1485,1496,1497],{"icon":426,"title":423,"to":424},[461,1498,1499],{},"The Vue renderer for Lynx and what changes in your code.",[1501,1502,1503],"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":522,"searchDepth":529,"depth":560,"links":1505},[1506,1507,1508,1509,1510,1511,1512],{"id":472,"depth":560,"text":473},{"id":503,"depth":560,"text":504},{"id":879,"depth":560,"text":880},{"id":1099,"depth":560,"text":323},{"id":1170,"depth":560,"text":1171},{"id":1453,"depth":560,"text":1454},{"id":1479,"depth":560,"text":1480},"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":1518,"description":1519},"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",[1522,1524],{"title":428,"path":429,"stem":430,"description":1523,"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":437,"path":438,"stem":439,"description":1525,"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.",1785008679557]