[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fgetting-started-with-solidjs":663,"blog-author-\u002Fblog\u002Fgetting-started-with-solidjs":1026,"i-material-symbols:arrow-back-rounded":1041},{"id":4,"extension":5,"footer":6,"header":73,"meta":83,"stem":84,"__hash__":85},"navigation\u002Fdata\u002Fshared\u002Fnavigation.yml","yml",{"brand":7,"columns":13,"legal":63},{"name":8,"tagline":9,"downloadCta":10},"Pieces","The memory layer for modern work.",{"label":11,"href":12},"All downloads","\u002Fdownloads",[14,26,39,51],{"title":15,"links":16},"Product",[17,20,23],{"label":18,"href":19},"Pieces Desktop","\u002F",{"label":21,"href":22},"Pieces Enterprise","\u002Fenterprise",{"label":24,"href":25},"Pieces MCP","\u002Fmcp",{"title":27,"links":28},"Resources",[29,33,36],{"label":30,"href":31,"external":32},"Documentation","url:docs.home",true,{"label":34,"href":35},"Blog","\u002Fblog",{"label":37,"href":38,"external":32},"GitHub","url:github.org",{"title":40,"links":41},"Community",[42,45,48],{"label":43,"href":44,"external":32},"Discord","url:social.discord",{"label":46,"href":47,"external":32},"X \u002F Twitter","url:social.x",{"label":49,"href":50,"external":32},"LinkedIn","url:social.linkedin",{"title":52,"links":53},"Company",[54,57,60],{"label":55,"href":56},"About","\u002Fabout",{"label":58,"href":59},"Updates","\u002Fupdates",{"label":61,"href":62},"Contact","\u002Fcontact",[64,67,70],{"label":65,"href":66},"Privacy Policy","\u002Flegal\u002Fprivacy",{"label":68,"href":69},"Refund Policy","\u002Flegal\u002Frefund",{"label":71,"href":72},"Terms of Service","\u002Flegal\u002Fterms",{"links":74,"signIn":75,"contact":78,"cta":80},[],{"label":76,"href":77},"Sign in","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","VdirGIa8cUm6xLprbBeTKcw914JfyJjWfF-9hSVOX5Y",{"id":87,"extension":5,"links":88,"meta":660,"stem":661,"__hash__":662},"urlSettings\u002Fdata\u002Fshared\u002Furls.yml",[89,93,97,101,105,109,113,117,121,125,129,133,137,141,145,149,153,157,161,165,169,173,177,181,185,189,192,196,200,204,208,212,216,220,224,228,232,236,240,244,248,252,256,260,264,268,272,276,280,284,288,292,295,299,303,306,310,314,318,322,326,330,334,338,342,346,350,354,358,362,366,370,374,378,382,386,390,394,398,402,406,410,414,418,422,426,430,434,438,442,446,450,453,457,461,465,469,473,477,480,483,486,489,493,497,500,504,508,512,516,520,524,528,532,536,540,544,548,551,555,559,563,567,571,574,577,580,584,587,591,595,599,603,606,610,614,617,620,623,627,631,635,638,641,644,648,652,656],{"key":90,"label":91,"href":92},"downloads.desktop","Desktop download page","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdownload",{"key":94,"label":95,"href":96},"downloads.macOS.dmgArm64","macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg-arm64\u002Fdownload",{"key":98,"label":99,"href":100},"downloads.macOS.dmgIntel","macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fdmg\u002Fdownload",{"key":102,"label":103,"href":104},"downloads.macOS.pkg","macOS PKG","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg\u002Fdownload",{"key":106,"label":107,"href":108},"downloads.macOS.universal","Desktop macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fmacos-universal\u002Fdownload",{"key":110,"label":111,"href":112},"downloads.macOS.pkgArm64","Desktop macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd-arm64\u002Fdownload",{"key":114,"label":115,"href":116},"downloads.macOS.pkgIntel","Desktop macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pfd\u002Fdownload",{"key":118,"label":119,"href":120},"downloads.windows.appinstaller","Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fpieces_for_x.appinstaller",{"key":122,"label":123,"href":124},"downloads.windows.exe","Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-exe\u002Fdownload",{"key":126,"label":127,"href":128},"downloads.windows.msix","Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fwindows-msix\u002Fdownload",{"key":130,"label":131,"href":132},"downloads.windows.suiteManager","Windows Suite Manager","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_suite_windows\u002Fappinstaller\u002Fdownload",{"key":134,"label":135,"href":136},"downloads.linux.flatpakRepo","Linux Flatpak repository","https:\u002F\u002Fbuilds.pieces.app\u002Fpieces-flatpak-repo\u002Fpieces-flatpak.flatpakrepo",{"key":138,"label":139,"href":140},"downloads.linux.snapDesktop","Linux Snap Desktop","https:\u002F\u002Fsnapcraft.io\u002Fpieces-for-developers",{"key":142,"label":143,"href":144},"downloads.linux.snapPiecesOS","Linux Snap PiecesOS","https:\u002F\u002Fsnapcraft.io\u002Fpieces-os",{"key":146,"label":147,"href":148},"downloads.linux.snap","Desktop Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fpieces_for_x\u002Fsnap\u002Fdownload",{"key":150,"label":151,"href":152},"downloads.piecesOS.macOS.dmgArm64","PiecesOS macOS DMG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg-arm64\u002Fdownload",{"key":154,"label":155,"href":156},"downloads.piecesOS.macOS.dmgIntel","PiecesOS macOS DMG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fdmg\u002Fdownload",{"key":158,"label":159,"href":160},"downloads.piecesOS.macOS.universal","PiecesOS macOS Universal","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fmacos-universal\u002Fdownload",{"key":162,"label":163,"href":164},"downloads.piecesOS.macOS.pkgArm64","PiecesOS macOS PKG Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only-arm64\u002Fdownload",{"key":166,"label":167,"href":168},"downloads.piecesOS.macOS.pkgIntel","PiecesOS macOS PKG Intel","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-pos-launch-only\u002Fdownload",{"key":170,"label":171,"href":172},"downloads.piecesOS.windows.appinstaller","PiecesOS Windows App Installer","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fappinstaller\u002Fos_server.appinstaller",{"key":174,"label":175,"href":176},"downloads.piecesOS.windows.exe","PiecesOS Windows EXE","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-exe\u002Fdownload",{"key":178,"label":179,"href":180},"downloads.piecesOS.windows.msix","PiecesOS Windows MSIX","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fwindows-msix\u002Fdownload",{"key":182,"label":183,"href":184},"downloads.piecesOS.linux.snap","PiecesOS Linux Snap package","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fos_server\u002Fsnap\u002Fdownload",{"key":186,"label":187,"href":188},"downloads.combined.macOS.appleSilicon","Combined macOS installer Apple Silicon","https:\u002F\u002Fbuilds.pieces.app\u002Fstages\u002Fproduction\u002Fmacos_packaging\u002Fpkg-arm64\u002Fdownload",{"key":190,"label":191,"href":104},"downloads.combined.macOS.intel","Combined macOS installer Intel",{"key":193,"label":194,"href":195},"downloads.guides.macOS","macOS installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fmacos-installation-guide",{"key":197,"label":198,"href":199},"downloads.guides.windows","Windows installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Fwindows-installation-guide",{"key":201,"label":202,"href":203},"downloads.guides.linux","Linux installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide",{"key":205,"label":206,"href":207},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":209,"label":210,"href":211},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":213,"label":214,"href":215},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":217,"label":218,"href":219},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":221,"label":222,"href":223},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":225,"label":226,"href":227},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":229,"label":230,"href":231},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":233,"label":234,"href":235},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":237,"label":238,"href":239},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":241,"label":242,"href":243},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":245,"label":246,"href":247},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":249,"label":250,"href":251},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":253,"label":254,"href":255},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":257,"label":258,"href":259},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":261,"label":262,"href":263},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":265,"label":266,"href":267},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":269,"label":270,"href":271},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":273,"label":274,"href":275},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":277,"label":278,"href":279},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":281,"label":282,"href":283},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":285,"label":286,"href":287},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":289,"label":290,"href":291},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":293,"label":294,"href":92},"docs.desktop.download","Desktop download docs",{"key":296,"label":297,"href":298},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":300,"label":301,"href":302},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":304,"label":305,"href":207},"docs.piecesOS.install","PiecesOS install docs",{"key":307,"label":308,"href":309},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":311,"label":312,"href":313},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":315,"label":316,"href":317},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":319,"label":320,"href":321},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":323,"label":324,"href":325},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":327,"label":328,"href":329},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":331,"label":332,"href":333},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":335,"label":336,"href":337},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":343,"label":344,"href":345},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":347,"label":348,"href":349},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":351,"label":352,"href":353},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":355,"label":356,"href":357},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":359,"label":360,"href":361},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":363,"label":364,"href":365},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":367,"label":368,"href":369},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":371,"label":372,"href":373},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":375,"label":376,"href":377},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":379,"label":380,"href":381},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":383,"label":384,"href":385},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":387,"label":388,"href":389},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":391,"label":392,"href":393},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":395,"label":396,"href":397},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":399,"label":400,"href":401},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":403,"label":404,"href":405},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":407,"label":408,"href":409},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":411,"label":412,"href":413},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":415,"label":416,"href":417},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":419,"label":420,"href":421},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":423,"label":424,"href":425},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":427,"label":428,"href":429},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":431,"label":432,"href":433},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":435,"label":436,"href":437},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":439,"label":440,"href":441},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":443,"label":444,"href":445},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":447,"label":448,"href":449},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":451,"label":58,"href":452},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":454,"label":455,"href":456},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":458,"label":459,"href":460},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":462,"label":463,"href":464},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":466,"label":467,"href":468},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":470,"label":471,"href":472},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":474,"label":475,"href":476},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":478,"label":34,"href":479},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":481,"label":43,"href":482},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":484,"label":46,"href":485},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":487,"label":488,"href":485},"social.twitter","Twitter",{"key":490,"label":491,"href":492},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":494,"label":495,"href":496},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":498,"label":49,"href":499},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":501,"label":502,"href":503},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":505,"label":506,"href":507},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":509,"label":510,"href":511},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":513,"label":514,"href":515},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":517,"label":518,"href":519},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":521,"label":522,"href":523},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":525,"label":526,"href":527},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":529,"label":530,"href":531},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":533,"label":534,"href":535},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":537,"label":538,"href":539},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":541,"label":542,"href":543},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":545,"label":546,"href":547},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":549,"label":550,"href":247},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":552,"label":553,"href":554},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":556,"label":557,"href":558},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":560,"label":561,"href":562},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":564,"label":565,"href":566},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":568,"label":569,"href":570},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":572,"label":573,"href":66},"legal.privacyPolicy","Privacy policy",{"key":575,"label":576,"href":69},"legal.refundPolicy","Refund policy",{"key":578,"label":579,"href":72},"legal.terms","Terms",{"key":581,"label":582,"href":583},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":585,"label":586,"href":503},"videos.youtubeChannel","YouTube channel",{"key":588,"label":589,"href":590},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":592,"label":593,"href":594},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":596,"label":597,"href":598},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":600,"label":601,"href":602},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":604,"label":605,"href":519},"sales.feedback","Feedback discussions",{"key":607,"label":608,"href":609},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":611,"label":612,"href":613},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":615,"label":616,"href":19},"routes.home","Home route",{"key":618,"label":619,"href":56},"routes.about","About route",{"key":621,"label":622,"href":12},"routes.downloads","Downloads route",{"key":624,"label":625,"href":626},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":628,"label":629,"href":630},"routes.pricing","Pricing route","\u002Fpricing",{"key":632,"label":633,"href":634},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":636,"label":637,"href":22},"routes.enterprise","Enterprise route",{"key":639,"label":640,"href":62},"routes.contact","Contact route",{"key":642,"label":643,"href":59},"routes.updates","Updates route",{"key":645,"label":646,"href":647},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":649,"label":650,"href":651},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":653,"label":654,"href":655},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":657,"label":658,"href":659},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","NLkVE1lIUws518K-1QsSB6T-GvlXYIzcRL1HDhqarGQ",{"id":664,"title":665,"author":666,"authorPhoto":667,"authorPhotoAlt":668,"authorSlug":669,"body":670,"buttonText":668,"buttonUrl":668,"category":1012,"date":1013,"description":1014,"draft":1015,"editorsPick":1015,"extension":1016,"featured":1015,"image":1017,"imageAlt":1018,"meta":1019,"navigation":32,"ogImage":668,"ogImageAlt":668,"path":1020,"seo":1021,"stem":1022,"tags":1023,"__hash__":1025},"blog\u002Fblog\u002Fgetting-started-with-solidjs.md","Getting Started With SolidJS","Ejiro Thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fflutter-vs-react-native\u002Fauthor.png",null,"ejiro-thankgod",{"type":671,"value":672,"toc":993},"minimark",[673,677,680,685,725,729,732,737,740,743,754,757,761,764,770,784,790,794,797,800,806,813,819,822,826,829,832,838,842,845,848,851,857,860,871,875,878,884,888,895,901,908,914,917,924,928,931,934,940,953,957,960,963,966,970,973,977],[674,675,676],"p",{},"SolidJS is a JavaScript declarative User Interface (UI) library for web applications. It is comparable to other JavaScript frameworks like Svelte, React, and Vue. Ryan Carniato developed SolidJS, which was released as open-source in 2018.",[674,678,679],{},"Almost all of SolidJS's principles align with those of other frameworks, with a few exceptions. For instance, the components are rendered only once, and there is no virtual DOM. These characteristics help explain why apps created with SolidJS run at lightning speeds, making it one of the fastest JavaScript frameworks on the market right now.",[681,682,684],"h2",{"id":683},"features-of-solidjs","Features of SolidJS",[686,687,688,696,702,708,714,719],"ul",{},[689,690,691,695],"li",{},[692,693,694],"strong",{},"Fine-grained updates"," to the real DOM.",[689,697,698,701],{},[692,699,700],{},"Declarative data:"," Model your state as a system with reactive primitives.",[689,703,704,707],{},[692,705,706],{},"Render-once mental model:"," Your components are regular JavaScript functions that run once to set up your view.",[689,709,710,713],{},[692,711,712],{},"Automatic dependency tracking:"," Accessing your reactive state subscribes to it.",[689,715,716],{},[692,717,718],{},"Small and fast.",[689,720,721,724],{},[692,722,723],{},"Simple:"," Learn a few powerful concepts that can be reused, combined, and built on in development.",[681,726,728],{"id":727},"understanding-solidjs","Understanding SolidJS",[674,730,731],{},"Developers tend to say that SolidJS's performance is great, given the fact that its reactivity concept (at the cost of Virtual DOM) is a puzzle for this performance improvement. For us to fully understand the dynamics of SolidJS, we have to take a close look at the components level, state management (signals and stores), routing, etc.",[733,734,736],"h3",{"id":735},"components","Components",[674,738,739],{},"Like all JavaScript frameworks, SolidJS is made up of components, and is built on the idea of components. These components are little segmented sections of an application, such as a page, a certain task, an input field, or a footer.",[674,741,742],{},"Let’s have a look at an exemplary component based on SolidJS:",[744,745,750],"pre",{"className":746,"code":748,"language":749},[747],"language-text","function Component(props) { return \nHello {props.name}\n;\n}\n;\n","text",[751,752,748],"code",{"__ignoreMap":753},"",[674,755,756],{},"SolidJS components are essentially JavaScript functions that output JSX, a hybrid of HTML and JavaScript.",[733,758,760],{"id":759},"rendering","Rendering",[674,762,763],{},"The syntax is similar to React.js for rendering components, so it might look familiar:",[744,765,768],{"className":766,"code":767,"language":749},[747],"import { render } from 'solid-js\u002Fweb';\nimport '.\u002Findex.css';\nimport App from '.\u002FApp';\nrender(() => , document.getElementById('root'));\n",[751,769,767],{"__ignoreMap":753},[674,771,772,773,776,777,779,780,783],{},"The render function must first be imported before we can proceed. After creating a ",[751,774,775],{},"div"," with some ",[751,778,749],{}," and a ",[751,781,782],{},"prop",", we then render the component and the container element:",[744,785,788],{"className":786,"code":787,"language":749},[747],"import { render } from 'solid-js\u002Fweb';\nfunction HelloWorld() {\n return \nHello World!\n;\n}\nrender(() => , document.getElementById('app'))\n",[751,789,787],{"__ignoreMap":753},[733,791,793],{"id":792},"routing","Routing",[674,795,796],{},"Like every other framework, SolidJS has its own method for handling routing, which lets users jump between different web pages.",[674,798,799],{},"Installing routing in SolidJS is the first step in implementing it:",[744,801,804],{"className":802,"code":803,"language":749},[747],"npm i @solidjs\u002Frouter\n",[751,805,803],{"__ignoreMap":753},[674,807,808,809,812],{},"Wrap your root component in the ",[751,810,811],{},"@solidjs\u002Frouter"," component after installation:",[744,814,817],{"className":815,"code":816,"language":749},[747],"import { render } from \"solid-js\u002Fweb\";\nimport { Router } from \"@solidjs\u002Frouter\";\nimport App from \".\u002FApp\";\nrender(\n () => (\n  ),\n document.getElementById(\"app\")\n);\n",[751,818,816],{"__ignoreMap":753},[674,820,821],{},"By wrapping the root component, we can then display the routes anywhere in the app.",[733,823,825],{"id":824},"signals","Signals",[674,827,828],{},"An observable piece of data that automatically tracks the computations on which it depends is represented by a signal. The signal's subscription list is expanded whenever a computation (such as an effect or a memo) invokes the getter method. All of the signal's subscribers will be notified if the data changes. In a nutshell, signals are just ways one can manage state in SolidJS.",[674,830,831],{},"Here is a short signal example:",[744,833,836],{"className":834,"code":835,"language":749},[747],"import { For, createSignal } from \"solid-js\";\nconst App = () => {\n let input;\n let todoId = 0;\n const [todos, setTodos] = createSignal([])\n const addTodo = (text) => {\n    setTodos([...todos(), { id: ++todoId, text, completed: false }]);\n  }\nconst toggleTodo = (id) => {\n    setTodos(todos().map((todo) => (\n      todo.id !== id ? todo : { ...todo, completed: !todo.completed }\n    )));\n  }\n",[751,837,835],{"__ignoreMap":753},[733,839,841],{"id":840},"stores","Stores",[674,843,844],{},"Solid responds to nested reactivity in stores with trackable proxy objects that can include additional objects that will also be automatically wrapped in proxies, and so forth.",[674,846,847],{},"SolidJS produces signals for variables accessed via tracking scopes. In essence, a store is a tree of signals that are tracked and adjusted individually.",[674,849,850],{},"So, in our signal example, we’ll replace the signal with a store, below:",[744,852,855],{"className":853,"code":854,"language":749},[747],"import { createStore } from \"solid-js\u002Fstore\";\nconst App = () => {\n let input;\n let todoId = 0;\n const [todos, setTodos] = createStore([]);\nconst addTodo = (text) => {\n    setTodos([...todos, { id: ++todoId, text, completed: false }]);\n  }\nconst toggleTodo = (id) => {\n    setTodos(todo => todo.id === id, \"completed\", completed => !completed);\n  }\n",[751,856,854],{"__ignoreMap":753},[681,858,665],{"id":859},"getting-started-with-solidjs",[674,861,862,863,870],{},"With SolidJS, there are two ways to start. The first is via their online ",[864,865,869],"a",{"href":866,"rel":867},"https:\u002F\u002Fplayground.solidjs.com\u002F",[868],"nofollow","REPL",", which is helpful for last-minute prototyping. The second method involves cloning an already-made SolidJS team template, which will be used for this project.",[733,872,874],{"id":873},"installation","Installation",[674,876,877],{},"There are two versions of templates: the TypeScript template and the JavaScript template. For this introduction, we'll use the JavaScript version; later, we'll talk about the TypeScript version.",[744,879,882],{"className":880,"code":881,"language":749},[747],"npx degit solidjs\u002Ftemplates\u002Fjs todo-app\ncd todo-app\nnpm i \nnpm run dev\n",[751,883,881],{"__ignoreMap":753},[733,885,887],{"id":886},"create-todo-components","Create Todo Components",[674,889,890,891,894],{},"We'll develop a ",[751,892,893],{},"Todolist.jsx"," component, which will have an input field and a list of every task the user has ever logged:",[744,896,899],{"className":897,"code":898,"language":749},[747],"import styles from \".\u002FTodolist.module.css\"\nimport { TiDeleteOutline } from 'solid-icons\u002Fti'\nimport { createStore } from \"solid-js\u002Fstore\"\nfunction TodoList() {\n let input;\n const addTodo = (input) => {\n const title = input.value;\n if (!title.trim()) return;\n        setTodos({\n            objects: [{ text: title, id: todos.counter }, ...todos.objects],\n            counter: todos.counter + 1\n        });\n        input.value = \"\";\n    }\n const deleteTodo = (output) => {\n        setTodos('objects', (t) => t.filter((object) => object.id !== output))\n    }\n const [todos, setTodos] = createStore({\n        objects: [],\n        counter: 0,\n    })\n return (\n \n                     placeholder=\"What do you have in mind today?\" name=\"todo\"                    onKeyDown={(e) => {                        if (e.key === \"Enter\") {                            addTodo(input);                        }                    }}>   {(todo) =>                                  {todo.text}  {                                    deleteTodo(todo.id)}}>                      }   \n \n    );\n}\nexport default TodoList\n",[751,900,898],{"__ignoreMap":753},[674,902,903,904,907],{},"Next, we’ll have to style our application by creating the ",[751,905,906],{},"Todolist.module.css"," component and updating our code block below:",[744,909,912],{"className":910,"code":911,"language":749},[747],".todoList li {\n padding: 20px;\n font-size: 1.3em;\n background-color: #f09560;\n border-left: 5px solid #88f63e;\n margin-bottom: 2px;\n color: #3E5252;\n border-radius: 50px;\n  }\n input {\n width: calc(100% - 40px);\n border-radius: 50px;\n padding: 20px;\n font-size: 1.3em;\n background-color: #c7d6d6;\n color: #4e5c5c;\n  }\n li .todoItem{\n display:flex;\n justify-content: space-between;\n  }\n",[751,913,911],{"__ignoreMap":753},[674,915,916],{},"This is how our application currently appears:",[674,918,919],{},[920,921],"img",{"alt":922,"src":923},"solid to do app user interface design","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgetting-started-with-solidjs\u002Fimg-001.png",[681,925,927],{"id":926},"solidjs-with-typescript","SolidJS With TypeScript",[674,929,930],{},"Solid is made to be simple to use with TypeScript. It uses standard JSX, which creates code that TypeScript can understand, and it has advanced built-in types for its API. This article offers some helpful hints for using TypeScript and writing SolidJS code.",[674,932,933],{},"Installing the TypeScript template is quite similar to installing the JavaScript template:",[744,935,938],{"className":936,"code":937,"language":749},[747],"npx degit solidjs\u002Ftemplates\u002Fts my-app\ncd my-app\nnpm i \nnpm run dev\n",[751,939,937],{"__ignoreMap":753},[674,941,942,943,946,947,952],{},"We won’t be going into too much detail, but to run TypeScript with the SolidJS Compiler, the TypeScript function in the ",[751,944,945],{},"tsconfig.json"," file has to be configured. Aside from that, for API, signals, context, and component types, you can look at the ",[864,948,951],{"href":949,"rel":950},"https:\u002F\u002Fwww.solidjs.com\u002Fguides\u002Ftypescript",[868],"TypeScript"," documentation.",[681,954,956],{"id":955},"comparison","Comparison",[674,958,959],{},"If you have experience with other frameworks, creating a CRUD app might come easily to you. This is due to Solid's significant similarity to libraries in terms of syntax and architecture. It employs the same structure, including one-way data binding, fragments, returning JSX, and functional components.",[674,961,962],{},"Compared to other libraries in SolidJS, using effects, refs, and events is also quite similar. Therefore, it is safe to claim that Solid offers about the same syntactic sugar as other libraries such as React, Vue, and Svelte, if not a little bit different. Then, why do we need yet another JavaScript-like web application framework?",[674,964,965],{},"Performance, developer experience, rendering technique, and reactivity are all areas where SolidJS and these frameworks diverge.",[681,967,969],{"id":968},"conclusion","Conclusion",[674,971,972],{},"We've gone over some of the fundamental features of SolidJS and created a simple Todo application that successfully showcases some of its functionality. Chew over SolidJS and TypeScript, and you’ll see that SolidJS has demonstrated certain encouraging traits. This is why SolidJS is counted among the dependable frameworks like React.",[674,974,975],{},[692,976,27],{},[686,978,979,986],{},[689,980,981],{},[864,982,985],{"href":983,"rel":984},"https:\u002F\u002Fwww.solidjs.com\u002Fguides\u002Fgetting-started",[868],"SolidJS",[689,987,988],{},[864,989,992],{"href":990,"rel":991},"https:\u002F\u002Fgithub.com\u002FEJINEROZ\u002FTodo-application-with-SolidJs",[868],"GitHub Repo",{"title":753,"searchDepth":994,"depth":994,"links":995},2,[996,997,1005,1009,1010,1011],{"id":683,"depth":994,"text":684},{"id":727,"depth":994,"text":728,"children":998},[999,1001,1002,1003,1004],{"id":735,"depth":1000,"text":736},3,{"id":759,"depth":1000,"text":760},{"id":792,"depth":1000,"text":793},{"id":824,"depth":1000,"text":825},{"id":840,"depth":1000,"text":841},{"id":859,"depth":994,"text":665,"children":1006},[1007,1008],{"id":873,"depth":1000,"text":874},{"id":886,"depth":1000,"text":887},{"id":926,"depth":994,"text":927},{"id":955,"depth":994,"text":956},{"id":968,"depth":994,"text":969},"Software Development","2022-12-08T00:00:00.000Z","SolidJS is one of the fastest JavaScript frameworks on the market right now. Let's talk about how to get started and build a simple todo app.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fgetting-started-with-solidjs\u002Fhero.jpeg","decorative cover image showing code on a laptop on a desk with a potted plant",{},"\u002Fblog\u002Fgetting-started-with-solidjs",{"title":665,"description":1014},"blog\u002Fgetting-started-with-solidjs",[1024],"solidjs; javascript-8","8yb2tq3ckSdDFj1ZWsnDbVHDfMJ_R7Vy_TPkcWrTpHg",{"id":1027,"title":666,"body":1028,"description":1032,"draft":1015,"extension":1016,"meta":1035,"navigation":32,"path":1036,"photo":1037,"photoAlt":668,"seo":1038,"stem":1039,"__hash__":1040},"authors\u002Fauthors\u002Fejiro-thankgod.md",{"type":671,"value":1029,"toc":1033},[1030],[674,1031,1032],{},"A talented frontend developer passionate about crafting intuitive and visually engaging user interfaces. With expertise in modern web technologies and a keen eye for design. He focuses on delivering seamless user experiences. Driven by a commitment to clean code and responsive design, they continuously explore innovative solutions to bring ideas to life on the web.",{"title":753,"searchDepth":994,"depth":994,"links":1034},[],{},"\u002Fauthors\u002Fejiro-thankgod","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fejiro-thankgod.jpg",{"title":666,"description":1032},"authors\u002Fejiro-thankgod","1IQvD6PQ9nKIuXoVn4W1HI31bUaqw9azxrnlNXLW20Q",{"left":1042,"top":1042,"width":1043,"height":1043,"rotate":1042,"vFlip":1015,"hFlip":1015,"body":1044},0,24,"\u003Cpath fill=\"currentColor\" d=\"m7.825 13l4.9 4.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-6.6-6.6q-.15-.15-.213-.325T4.426 12t.063-.375t.212-.325l6.6-6.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L7.825 11H19q.425 0 .713.288T20 12t-.288.713T19 13z\"\u002F>"]