[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"navigation":3,"url-settings":86,"blog-\u002Fblog\u002Fimplement-react-beautiful-dnd":671,"blog-author-\u002Fblog\u002Fimplement-react-beautiful-dnd":1173,"i-material-symbols:arrow-back-rounded":1185},{"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},"Manage account","url:portal.home",{"label":79,"href":62},"Get in touch",{"label":81,"href":82},"Download","url:routes.downloads",{},"data\u002Fshared\u002Fnavigation","XlSALC7vYCXHcmcXnjJViwIZKsqnQWF4bn4o9RrcSBE",{"id":87,"extension":5,"links":88,"meta":668,"stem":669,"__hash__":670},"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,296,300,303,307,311,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,454,458,461,465,469,473,477,481,485,488,491,494,497,501,505,508,512,516,520,524,528,532,536,540,544,548,552,556,559,563,567,571,575,579,582,585,588,592,595,599,603,607,611,614,618,622,625,628,631,635,639,643,646,649,652,656,660,664],{"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.linuxFlatpak","Linux Flatpak installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fflatpak",{"key":209,"label":210,"href":211},"downloads.guides.linuxSnap","Linux Snap installation guide","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Flinux-installation-guide\u002Fsnap",{"key":213,"label":214,"href":215},"downloads.guides.piecesOS","PiecesOS manual installation","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fmanual-installation",{"key":217,"label":218,"href":219},"extensions.chrome","Chrome extension","https:\u002F\u002Fchrome.google.com\u002Fwebstore\u002Fdetail\u002Fpieces-save-code-snippets\u002Figbgibhbfonhmjlechmeefimncpekepm",{"key":221,"label":222,"href":223},"extensions.firefox","Firefox add-on","https:\u002F\u002Faddons.mozilla.org\u002Fen-US\u002Ffirefox\u002Faddon\u002Fpieces-save-code-from-the-web\u002F",{"key":225,"label":226,"href":227},"extensions.edge","Edge add-on","https:\u002F\u002Fmicrosoftedge.microsoft.com\u002Faddons\u002Fdetail\u002Fpieces-save-code-snippet\u002Fhglfimcdgonaeeobjckfdabcldfidmim",{"key":229,"label":230,"href":231},"extensions.vscode","VS Code extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.pieces-vscode",{"key":233,"label":234,"href":235},"extensions.visualStudio","Visual Studio extension","https:\u002F\u002Fmarketplace.visualstudio.com\u002Fitems?itemName=MeshIntelligentTechnologiesInc.PiecesVisualStudio",{"key":237,"label":238,"href":239},"extensions.jetbrains","JetBrains plugin","https:\u002F\u002Fplugins.jetbrains.com\u002Fplugin\u002F17328-pieces--save-search-share--reuse-code-snippets",{"key":241,"label":242,"href":243},"extensions.obsidian","Obsidian plugin","https:\u002F\u002Fobsidian.md\u002Fplugins?id=pieces-for-developers",{"key":245,"label":246,"href":247},"extensions.sublime","Sublime package","https:\u002F\u002Fpackagecontrol.io\u002Fpackages\u002FPieces",{"key":249,"label":250,"href":251},"extensions.neovim","Neovim plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neo_vim",{"key":253,"label":254,"href":255},"extensions.jupyterlab","JupyterLab plugin","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fjupyterlab-pieces",{"key":257,"label":258,"href":259},"extensions.cli","Pieces CLI","https:\u002F\u002Fpypi.org\u002Fproject\u002Fpieces-cli\u002F",{"key":261,"label":262,"href":263},"docs.home","Documentation home","https:\u002F\u002Fdocs.pieces.app",{"key":265,"label":266,"href":267},"docs.getStarted","Get started docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces",{"key":269,"label":270,"href":271},"docs.api","API docs","https:\u002F\u002Fdocs.pieces.app\u002Fapi",{"key":273,"label":274,"href":275},"docs.desktop.overview","Desktop overview","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop",{"key":277,"label":278,"href":279},"docs.desktop.onboarding","Desktop onboarding","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fonboarding",{"key":281,"label":282,"href":283},"docs.desktop.timeline","Desktop timeline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Ftimeline",{"key":285,"label":286,"href":287},"docs.desktop.summaries","Desktop summaries docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fsingle-click-summaries",{"key":289,"label":290,"href":291},"docs.desktop.search","Desktop conversational search docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconversational-search",{"key":293,"label":294,"href":295},"docs.desktop.drive","Desktop drive docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fdrive",{"key":297,"label":298,"href":299},"docs.desktop.account","Desktop account settings docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fdesktop\u002Fconfiguration\u002Faccount",{"key":301,"label":302,"href":92},"docs.desktop.download","Desktop download docs",{"key":304,"label":305,"href":306},"docs.piecesOS.overview","PiecesOS overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies",{"key":308,"label":309,"href":310},"docs.piecesOS.details","PiecesOS details docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os",{"key":312,"label":313,"href":215},"docs.piecesOS.install","PiecesOS install docs",{"key":315,"label":316,"href":317},"docs.piecesOS.quickMenu","PiecesOS quick menu docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Fquick-menu",{"key":319,"label":320,"href":321},"docs.piecesOS.storage","On-device storage docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fon-device-storage",{"key":323,"label":324,"href":325},"docs.piecesOS.troubleshooting","PiecesOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fcore-dependencies\u002Fpieces-os\u002Ftroubleshooting",{"key":327,"label":328,"href":329},"docs.mcp.overview","MCP overview docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp",{"key":331,"label":332,"href":333},"docs.mcp.cursor","MCP Cursor docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcursor",{"key":335,"label":336,"href":337},"docs.mcp.vscode","MCP VS Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fvs-code",{"key":339,"label":340,"href":341},"docs.mcp.claudeDesktop","MCP Claude Desktop docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-desktop",{"key":343,"label":344,"href":345},"docs.mcp.claudeCode","MCP Claude Code docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-code",{"key":347,"label":348,"href":349},"docs.mcp.claudeCowork","MCP Claude Cowork docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fclaude-cowork",{"key":351,"label":352,"href":353},"docs.mcp.githubCopilot","MCP GitHub Copilot docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgithub-copilot",{"key":355,"label":356,"href":357},"docs.mcp.goose","MCP Goose docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoose",{"key":359,"label":360,"href":361},"docs.mcp.windsurf","MCP Windsurf docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fwindsurf",{"key":363,"label":364,"href":365},"docs.mcp.zed","MCP Zed docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fzed",{"key":367,"label":368,"href":369},"docs.mcp.jetbrains","MCP JetBrains docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fjetbrains-ides",{"key":371,"label":372,"href":373},"docs.mcp.continueDev","MCP Continue docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcontinue-dev",{"key":375,"label":376,"href":377},"docs.mcp.cline","MCP Cline docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fcline",{"key":379,"label":380,"href":381},"docs.mcp.raycast","MCP Raycast docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fraycast",{"key":383,"label":384,"href":385},"docs.mcp.rovoDevCli","MCP Rovo Dev CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Frovo-dev-cli",{"key":387,"label":388,"href":389},"docs.mcp.openaiCodexCli","MCP OpenAI Codex CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenai-codex-cli",{"key":391,"label":392,"href":393},"docs.mcp.googleGeminiCli","MCP Google Gemini CLI docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fgoogle-gemini-cli",{"key":395,"label":396,"href":397},"docs.mcp.amazonQ","MCP Amazon Q docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Famazon-q-developer",{"key":399,"label":400,"href":401},"docs.mcp.chatgptDev","MCP ChatGPT Developer Mode docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fchatgpt-developer-mode",{"key":403,"label":404,"href":405},"docs.mcp.openclaw","MCP OpenClaw docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fopenclaw",{"key":407,"label":408,"href":409},"docs.mcp.mcpRemote","MCP Remote docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fmcp-remote",{"key":411,"label":412,"href":413},"docs.mcp.ngrok","MCP ngrok docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmcp\u002Fngrok-setup",{"key":415,"label":416,"href":417},"docs.troubleshooting.macOS","macOS troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fmacos",{"key":419,"label":420,"href":421},"docs.troubleshooting.windows","Windows troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Fwindows",{"key":423,"label":424,"href":425},"docs.troubleshooting.linux","Linux troubleshooting docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fmeet-pieces\u002Ftroubleshooting\u002Flinux",{"key":427,"label":428,"href":429},"docs.privacy","Privacy and security docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fprivacy-security-your-data",{"key":431,"label":432,"href":433},"docs.support","Support docs","https:\u002F\u002Fdocs.pieces.app\u002Fproducts\u002Fsupport",{"key":435,"label":436,"href":437},"portal.home","Pieces portal","https:\u002F\u002Fportal.pieces.app",{"key":439,"label":440,"href":441},"site.home","Website home","https:\u002F\u002Fpieces.app",{"key":443,"label":444,"href":445},"site.about","About page","https:\u002F\u002Fpieces.app\u002Fabout",{"key":447,"label":448,"href":449},"site.features","Features page","https:\u002F\u002Fpieces.app\u002Ffeatures",{"key":451,"label":452,"href":453},"site.plugins","Plugins page","https:\u002F\u002Fpieces.app\u002Fplugins",{"key":455,"label":456,"href":457},"site.contact","Contact page","https:\u002F\u002Fpieces.app\u002Fcontact",{"key":459,"label":58,"href":460},"site.updates","https:\u002F\u002Fpieces.app\u002Fupdates",{"key":462,"label":463,"href":464},"site.news","News","https:\u002F\u002Fpieces.app\u002Fnews",{"key":466,"label":467,"href":468},"site.events","Community events","https:\u002F\u002Fpieces.app\u002Fcommunity\u002Fevents",{"key":470,"label":471,"href":472},"site.userStories","User stories","https:\u002F\u002Fpieces.app\u002Fuser-stories",{"key":474,"label":475,"href":476},"site.academy","Academy","https:\u002F\u002Fpieces.app\u002Flearn\u002Facademy",{"key":478,"label":479,"href":480},"site.support","Website support","https:\u002F\u002Fpieces.app\u002Fsupport",{"key":482,"label":483,"href":484},"site.standup","Standup","https:\u002F\u002Fpieces.app\u002Fstandup",{"key":486,"label":34,"href":487},"site.blog","https:\u002F\u002Fcode.pieces.app\u002Fblog",{"key":489,"label":43,"href":490},"social.discord","https:\u002F\u002Fdiscord.gg\u002Fgetpieces",{"key":492,"label":46,"href":493},"social.x","https:\u002F\u002Fx.com\u002Fgetpieces",{"key":495,"label":496,"href":493},"social.twitter","Twitter",{"key":498,"label":499,"href":500},"social.instagram","Instagram","https:\u002F\u002Fwww.instagram.com\u002Fgetpieces\u002F",{"key":502,"label":503,"href":504},"social.tiktok","TikTok","https:\u002F\u002Fwww.tiktok.com\u002F@getpieces",{"key":506,"label":49,"href":507},"social.linkedin","https:\u002F\u002Fwww.linkedin.com\u002Fcompany\u002Fgetpieces\u002F",{"key":509,"label":510,"href":511},"social.youtube","YouTube","https:\u002F\u002Fyoutube.com\u002F@getpieces",{"key":513,"label":514,"href":515},"github.org","GitHub organization","https:\u002F\u002Fgithub.com\u002Fpieces-app",{"key":517,"label":518,"href":519},"github.support","GitHub support","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport",{"key":521,"label":522,"href":523},"github.issues","GitHub issues","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fissues",{"key":525,"label":526,"href":527},"github.discussions","GitHub discussions","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fsupport\u002Fdiscussions",{"key":529,"label":530,"href":531},"github.documentation","GitHub documentation","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fdocumentation",{"key":533,"label":534,"href":535},"github.opensource","GitHub open source","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fopensource",{"key":537,"label":538,"href":539},"github.sdks.python","Python SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-python",{"key":541,"label":542,"href":543},"github.sdks.typescript","TypeScript SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-typescript",{"key":545,"label":546,"href":547},"github.sdks.dart","Dart SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-dart",{"key":549,"label":550,"href":551},"github.sdks.kotlin","Kotlin SDK","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fpieces-os-client-sdk-for-kotlin",{"key":553,"label":554,"href":555},"github.plugins.obsidian","Obsidian plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fobsidian-pieces",{"key":557,"label":558,"href":255},"github.plugins.jupyterlab","JupyterLab plugin repository",{"key":560,"label":561,"href":562},"github.plugins.sublime","Sublime plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_sublime",{"key":564,"label":565,"href":566},"github.plugins.neovim","Neovim plugin repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fplugin_neovim",{"key":568,"label":569,"href":570},"github.cliAgent","CLI agent repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fcli-agent",{"key":572,"label":573,"href":574},"github.mcpDart","MCP Dart repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fmcp_dart",{"key":576,"label":577,"href":578},"github.awesomePieces","Awesome Pieces repository","https:\u002F\u002Fgithub.com\u002Fpieces-app\u002Fawesome-pieces",{"key":580,"label":581,"href":66},"legal.privacyPolicy","Privacy policy",{"key":583,"label":584,"href":69},"legal.refundPolicy","Refund policy",{"key":586,"label":587,"href":72},"legal.terms","Terms",{"key":589,"label":590,"href":591},"legal.security","Legal security","https:\u002F\u002Fpieces.app\u002Flegal\u002Fsecurity",{"key":593,"label":594,"href":511},"videos.youtubeChannel","YouTube channel",{"key":596,"label":597,"href":598},"videos.gettingStartedDesktop","Getting started desktop video","https:\u002F\u002Fyoutu.be\u002FdUr1lRM_TYk",{"key":600,"label":601,"href":602},"videos.snippetDiscoveryxR","Snippet discovery video","https:\u002F\u002Fyoutu.be\u002FG6vb1USw-30",{"key":604,"label":605,"href":606},"sales.bookACall","Book a sales call","https:\u002F\u002Fcalendar.app.google\u002FWVUDtUfNy5Vst3sH7",{"key":608,"label":609,"href":610},"sales.enterprise","Enterprise form","https:\u002F\u002Fgetpieces.typeform.com\u002Fto\u002FaVQFTvpE",{"key":612,"label":613,"href":527},"sales.feedback","Feedback discussions",{"key":615,"label":616,"href":617},"sales.earlyAccess","Early access form","https:\u002F\u002Fgetpieces.typeform.com\u002Fearlyaccess",{"key":619,"label":620,"href":621},"sales.supportEmail","Support email","mailto:support@pieces.app",{"key":623,"label":624,"href":19},"routes.home","Home route",{"key":626,"label":627,"href":56},"routes.about","About route",{"key":629,"label":630,"href":12},"routes.downloads","Downloads route",{"key":632,"label":633,"href":634},"routes.thanks","Post-install thanks route","\u002Finstall\u002Fthanks",{"key":636,"label":637,"href":638},"routes.pricing","Pricing route","\u002Fpricing",{"key":640,"label":641,"href":642},"cta.freeTrial","Start free trial CTA (Pieces Pro) — used by \u002Fcampaigns\u002F* landing pages","https:\u002F\u002Fcampaigns.pieces.app\u002F",{"key":644,"label":645,"href":22},"routes.enterprise","Enterprise route",{"key":647,"label":648,"href":62},"routes.contact","Contact route",{"key":650,"label":651,"href":59},"routes.updates","Updates route",{"key":653,"label":654,"href":655},"routes.migrationError","Migration error route","\u002Fmigration\u002Ferror",{"key":657,"label":658,"href":659},"routes.authenticated","Post-login authenticated route","\u002Fauth\u002Fsigned-in",{"key":661,"label":662,"href":663},"routes.signed-out","Signed out route","\u002Fauth\u002Fsigned-out",{"key":665,"label":666,"href":667},"routes.authentication-error","Authentication error route","\u002Fauth\u002Ferror",{},"data\u002Fshared\u002Furls","2AvfSWI6bZACH5Kr1ZS3txMLjteRjCjbDR_ul1uRZ9Q",{"id":672,"title":673,"author":674,"authorPhoto":675,"authorPhotoAlt":676,"authorSlug":677,"body":678,"buttonText":1160,"buttonUrl":1160,"category":1161,"date":1162,"description":1163,"draft":1164,"editorsPick":1164,"extension":1165,"featured":1164,"image":1166,"imageAlt":1167,"meta":1168,"navigation":32,"ogImage":1160,"ogImageAlt":1160,"path":1169,"seo":1170,"stem":1171,"tags":1160,"__hash__":1172},"blog\u002Fblog\u002Fimplement-react-beautiful-dnd.md","Using React Beautiful DnD to Implement Drag and Drop","Mohammad Faisal","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimplement-react-beautiful-dnd\u002Fauthor.jpeg","Mohammad Faisal.","mohammad-faisal",{"type":679,"value":680,"toc":1140},"minimark",[681,685,690,693,716,719,722,726,729,734,737,740,743,761,765,768,771,778,782,785,789,792,803,806,812,816,819,825,832,836,839,842,848,855,858,864,867,871,874,880,886,893,899,913,917,920,926,932,947,963,966,969,973,976,982,988,1010,1020,1024,1030,1036,1040,1046,1049,1055,1062,1068,1071,1077,1080,1086,1089,1095,1098,1104,1110,1113,1117],[682,683,684],"p",{},"The React front-end application world is an ocean of infinite possibilities for building your application. You can have your users interact with your product in so many ways! However, some recognizable patterns are used in most applications. For example, because drag and drop functionality is so frequently used, we can use React Beautiful DnD to make our applications more user-friendly.",[686,687,689],"h2",{"id":688},"when-to-use-drag-and-drop-in-react","When to Use Drag and Drop in React",[682,691,692],{},"These are common use cases of drag and drop functionality:",[694,695,696,700,703,713],"ul",{},[697,698,699],"li",{},"Reordering items in a list",[697,701,702],{},"Creating a file dropper",[697,704,705,706],{},"Creating a ",[707,708,712],"a",{"href":709,"rel":710},"https:\u002F\u002Fkanbantool.com\u002Fkanban-board",[711],"nofollow","Kanban board",[697,714,715],{},"Moving items between lists",[682,717,718],{},"Therefore, you should have a good working knowledge of how to build React drag and drop in your application.",[682,720,721],{},"Today, we’ll cover this important skill. We’ll build drag and drop functionality into our application using React Beautiful DnD. We’ll also discuss troubleshooting with this library.",[686,723,725],{"id":724},"what-is-react-beautiful-dnd","What is React Beautiful DnD?",[682,727,728],{},"React Beautiful DnD is a React drag and drop library that provides the tools to build drag and drop functionality into your application. This powerful library provides you flexibility and offers many features.",[730,731,733],"h3",{"id":732},"why-use-react-beautiful-dnd","Why Use React Beautiful DnD?",[682,735,736],{},"React Beautiful DnD is only one drag-and-drop library of the many available on the market. However, we’ll use it because it’s simple and easy to use.",[682,738,739],{},"React Beautiful DnD is a very lightweight library and is straightforward to implement in your application. It’s also very customizable, so you can adapt it to your needs.",[682,741,742],{},"Here are some other libraries that you can use to build drag and drop in React:",[694,744,745,753],{},[697,746,747,752],{},[707,748,751],{"href":749,"rel":750},"https:\u002F\u002Fgithub.com\u002Freact-dnd\u002Freact-dnd",[711],"react-dnd",": This is very popular, but it’s a bit complex to use.",[697,754,755,760],{},[707,756,759],{"href":757,"rel":758},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@dnd-kit\u002Fcore",[711],"@dnd-kit\u002Fcore",": This is a very lightweight library, but it’s not as customizable as React Beautiful DnD.",[686,762,764],{"id":763},"what-are-we-going-to-build","What Are We Going to Build?",[682,766,767],{},"As a React Beautiful DnD example, we’re going to build a very simple application that’ll have a list of items that we can drag and drop to reorder.",[682,769,770],{},"The final product will look something like this.",[682,772,773],{},[774,775],"img",{"alt":776,"src":777},"The final product that we'll build with React Beautiful DnD.","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimplement-react-beautiful-dnd\u002Fimg-001.png",[730,779,781],{"id":780},"prerequisites","Prerequisites",[682,783,784],{},"You’ll need a basic knowledge of React, and that’s it! Let's get started.",[686,786,788],{"id":787},"set-up-the-application-with-react-beautiful-dnd","Set Up the Application with React Beautiful Dnd",[682,790,791],{},"First, create a boilerplate React.JS application:",[793,794,799],"pre",{"className":795,"code":797,"language":798},[796],"language-text","npx create-react-app drag-n-drop-demo\n","text",[800,801,797],"code",{"__ignoreMap":802},"",[682,804,805],{},"Then, install the dependencies:",[793,807,810],{"className":808,"code":809,"language":798},[796],"npm install react-beautiful-dnd\n",[800,811,809],{"__ignoreMap":802},[730,813,815],{"id":814},"_1-create-a-simple-task-list","1. Create a Simple Task List",[682,817,818],{},"First, let’s make a simple list of tasks as a starting point:",[793,820,823],{"className":821,"code":822,"language":798},[796],"const initialTasks = [\n  {\n    id: 1,\n    title: \"Task 1\",\n  },\n  {\n    id: 2,\n    title: \"Task 2\",\n  },\n  {\n    id: 3,\n    title: \"Task 3\",\n  },\n];\n",[800,824,822],{"__ignoreMap":802},[682,826,827],{},[707,828,831],{"href":829,"rel":830},"https:\u002F\u002Fa5411705-e582-4f98-a138-5ded95573d50.pieces.cloud\u002F?p=048f4f9d14",[711],"Save this code",[730,833,835],{"id":834},"_2-create-the-context","2. Create the Context",[682,837,838],{},"The first step in using drag and drop functionality is to declare a particular area on the screen as droppable.",[682,840,841],{},"The way we do this is by creating context. We will use this context to wrap the area on the screen where we want drag and drop:",[793,843,846],{"className":844,"code":845,"language":798},[796],"  All drag-and-drop functionality happens inside this context\n",[800,847,845],{"__ignoreMap":802},[682,849,850,851,854],{},"You’ll notice a special function called ",[800,852,853],{},"onDragEnd"," passed into the context. We’ll use this function to update the state of our application.",[682,856,857],{},"For now, let’s use the following code:",[793,859,862],{"className":860,"code":861,"language":798},[796],"const onDragEnd = (result) => {\n console.log(result);\n};\n",[800,863,861],{"__ignoreMap":802},[682,865,866],{},"Basically, this function will be called after a user finishes a drag and drop operation.",[730,868,870],{"id":869},"_3-create-the-droppable-area","3. Create the Droppable Area",[682,872,873],{},"Let's create a React Beautiful DnD component that will be used to wrap the area on the screen that will be droppable:",[793,875,878],{"className":876,"code":877,"language":798},[796],"  {(provided) => (\n      { Your draggable items go here }      {provided. placeholder} \u002F\u002F This is a placeholder that will be used to show the space where the item will be dropped    \n  )}\n",[800,879,877],{"__ignoreMap":802},[682,881,882],{},[707,883,831],{"href":884,"rel":885},"https:\u002F\u002Fa5411705-e582-4f98-a138-5ded95573d50.pieces.cloud\u002F?p=60a2428c3b",[711],[682,887,888,889,892],{},"The ",[800,890,891],{},"droppableId"," is a unique identifier for the droppable area. This is used to identify the area when a drag and drop operation is completed.",[682,894,888,895,898],{},[800,896,897],{},"provided"," object contains two properties:",[694,900,901,907],{},[697,902,888,903,906],{},[800,904,905],{},"innerRef"," refers to the DOM element that wraps the droppable area.",[697,908,888,909,912],{},[800,910,911],{},"droppableProps"," is a set of props that will be applied to the DOM element.",[730,914,916],{"id":915},"_4-create-the-draggable-items","4. Create the Draggable Items",[682,918,919],{},"Now, let's go over the task items individually and make them draggable:",[793,921,924],{"className":922,"code":923,"language":798},[796],"{\n  tasks.map((task, index) => (\n      {(provided) => (\n        \n          {...provided.draggableProps}\n          {...provided.dragHandleProps}\n          ref={provided.innerRef}\n        >\n{task.title}\n      )}\n  ));\n}\n",[800,925,923],{"__ignoreMap":802},[682,927,928],{},[707,929,831],{"href":930,"rel":931},"https:\u002F\u002Fa5411705-e582-4f98-a138-5ded95573d50.pieces.cloud\u002F?p=d6a944be79",[711],[682,933,934,935,938,939,942,943,946],{},"The React ",[800,936,937],{},"Draggable"," component takes in two props. The ",[800,940,941],{},"draggableId"," is a unique identifier for the draggable item, and the ",[800,944,945],{},"index"," is the position of the item in the list.",[682,948,888,949,951,952,955,956,959,960,962],{},[800,950,897],{}," object contains three properties. The ",[800,953,954],{},"draggableProps"," is a set of props that will be applied to the DOM element. The ",[800,957,958],{},"dragHandleProps"," is a set of props applied to the DOM element used to drag the item. The ",[800,961,905],{}," refers to the DOM element that wraps the draggable item.",[682,964,965],{},"Now, you should have a working drag-and-drop functionality. However, you’ll notice that the items will return to their original position after updating them.",[682,967,968],{},"Let's solve that issue!",[730,970,972],{"id":971},"_5-update-the-state-with-react-beautiful-dnd","5. Update the State with React Beautiful Dnd",[682,974,975],{},"The above issue occurs because the application's state is not updated when the drag and drop operation is completed. Let's do that:",[793,977,980],{"className":978,"code":979,"language":798},[796],"const onDragEnd = (result) => {\n if (!result.destination) return;\n const items = Array.from(tasks);\n const [reorderedItem] = items.splice(result.source.index, 1);\n  items.splice(result.destination.index, 0, reorderedItem);\n  setTasks(items);\n};\n",[800,981,979],{"__ignoreMap":802},[682,983,984],{},[707,985,831],{"href":986,"rel":987},"https:\u002F\u002Fa5411705-e582-4f98-a138-5ded95573d50.pieces.cloud\u002F?p=870142bf32",[711],[682,989,888,990,993,994,997,998,1001,1002,1004,1005,997,1007,1009],{},[800,991,992],{},"result"," object contains the ",[800,995,996],{},"source"," and ",[800,999,1000],{},"destination"," properties. The ",[800,1003,996],{}," property includes the ",[800,1006,945],{},[800,1008,891],{}," of the dragged item.",[682,1011,888,1012,1014,1015,997,1017,1019],{},[800,1013,1000],{}," property contains the ",[800,1016,945],{},[800,1018,891],{}," of the dropped item.",[730,1021,1023],{"id":1022},"_6-complete-code","6. Complete Code",[793,1025,1028],{"className":1026,"code":1027,"language":798},[796],"import React, { useState } from \"react\";\nimport { DragDropContext, Droppable, Draggable } from \"react-beautiful-dnd\";\nconst initialTasks = [\n  {\n    id: 1,\n    title: \"Task 1\",\n  },\n  {\n    id: 2,\n    title: \"Task 2\",\n  },\n  {\n    id: 3,\n    title: \"Task 3\",\n  },\n];\nfunction App() {\n const [tasks, setTasks] = useState(initialTasks);\n const onDragEnd = (result) => {\n if (!result.destination) return;\n const items = Array.from(tasks);\n const [reorderedItem] = items.splice(result.source.index, 1);\n    items.splice(result.destination.index, 0, reorderedItem);\n    setTasks(items);\n  };\n return (\n                        {(provided) => (                          {tasks.map((task, index) => (                                  key={task.id}                  draggableId={task.id.toString()}                  index={index}                >                  {(provided) => (                                          {...provided.draggableProps}                      {...provided.dragHandleProps}                      ref={provided.innerRef}                    >                      {task.title}                                      )}                              ))}              {provided.placeholder}            \n          )}\n  );\n}\nexport default App;\n",[800,1029,1027],{"__ignoreMap":802},[682,1031,1032],{},[707,1033,831],{"href":1034,"rel":1035},"https:\u002F\u002Fa5411705-e582-4f98-a138-5ded95573d50.pieces.cloud\u002F?p=a49f4186fa",[711],[686,1037,1039],{"id":1038},"common-issues-with-react-beautiful-dnd-examples","Common Issues with React Beautiful Dnd Examples",[1041,1042,1043],"ol",{},[697,1044,1045],{},"The draggable item is not moving.",[682,1047,1048],{},"Sometimes, you’ll notice that the items are not moving. If you open the console, you’ll see errors like the following:",[793,1050,1053],{"className":1051,"code":1052,"language":798},[796],"Unable to find draggable with id: 1\n",[800,1054,1052],{"__ignoreMap":802},[682,1056,1057,1058,1061],{},"This is a known issue and usually happens due to the use of ",[800,1059,1060],{},"React.StrictMode"," on your index.js file.",[682,1063,1064,1065,1067],{},"To fix this issue, you have to remove the ",[800,1066,1060],{},".",[682,1069,1070],{},"Instead of this:",[793,1072,1075],{"className":1073,"code":1074,"language":798},[796],"ReactDOM.render(        ,\n  document.getElementById(\"root\")\n);\n",[800,1076,1074],{"__ignoreMap":802},[682,1078,1079],{},"Use this:",[793,1081,1084],{"className":1082,"code":1083,"language":798},[796],"ReactDOM.render(, document.getElementById(\"root\"));\n",[800,1085,1083],{"__ignoreMap":802},[682,1087,1088],{},"This should solve the issue.",[1041,1090,1092],{"start":1091},2,[697,1093,1094],{},"The draggable item is not moving smoothly.",[682,1096,1097],{},"If you notice that the draggable item is not moving smoothly, you can try to add the following CSS to your application:",[793,1099,1102],{"className":1100,"code":1101,"language":798},[796],".react-beautiful-dnd-draggable {\n  transition: transform 0.2s;\n}\n",[800,1103,1101],{"__ignoreMap":802},[1041,1105,1107],{"start":1106},3,[697,1108,1109],{},"The draggable item is not moving to the correct position.",[682,1111,1112],{},"This is usually caused by the draggable item not having a designated height. You can fix this by adding a height value to the draggable object.",[730,1114,1116],{"id":1115},"references","References",[694,1118,1119,1126,1133],{},[697,1120,1121],{},[707,1122,1125],{"href":1123,"rel":1124},"https:\u002F\u002Fgithub.com\u002Fatlassian\u002Freact-beautiful-dnd",[711],"React Beautiful DnD",[697,1127,1128],{},[707,1129,1132],{"href":1130,"rel":1131},"https:\u002F\u002Freact-beautiful-dnd.netlify.app\u002F?path=\u002Fstory\u002Fsingle-vertical-list--basic",[711],"React Beautiful DnD Playground",[697,1134,1135],{},[707,1136,1139],{"href":1137,"rel":1138},"https:\u002F\u002Fgithub.com\u002FMohammad-Faisal\u002Freact-drag-n-drop-demo",[711],"Author’s GitHub Repo",{"title":802,"searchDepth":1091,"depth":1091,"links":1141},[1142,1143,1146,1149,1157],{"id":688,"depth":1091,"text":689},{"id":724,"depth":1091,"text":725,"children":1144},[1145],{"id":732,"depth":1106,"text":733},{"id":763,"depth":1091,"text":764,"children":1147},[1148],{"id":780,"depth":1106,"text":781},{"id":787,"depth":1091,"text":788,"children":1150},[1151,1152,1153,1154,1155,1156],{"id":814,"depth":1106,"text":815},{"id":834,"depth":1106,"text":835},{"id":869,"depth":1106,"text":870},{"id":915,"depth":1106,"text":916},{"id":971,"depth":1106,"text":972},{"id":1022,"depth":1106,"text":1023},{"id":1038,"depth":1091,"text":1039,"children":1158},[1159],{"id":1115,"depth":1106,"text":1116},null,"Software Development","2022-10-05T00:00:00.000Z","Create an easy-to-use drag and drop feature with React Beautiful DnD! The library is quick to implement and creates extremely useful features for users.",false,"md","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fblog\u002Fimplement-react-beautiful-dnd\u002Fhero.jpeg","Someone typing on a laptop.",{},"\u002Fblog\u002Fimplement-react-beautiful-dnd",{"title":673,"description":1163},"blog\u002Fimplement-react-beautiful-dnd","UJvDsyscfw_zzUYBXNkergO_TAj2gsihZxwcc2TqvkE",{"id":1174,"title":674,"body":1175,"description":802,"draft":1164,"extension":1165,"meta":1179,"navigation":32,"path":1180,"photo":1181,"photoAlt":1160,"seo":1182,"stem":1183,"__hash__":1184},"authors\u002Fauthors\u002Fmohammad-faisal.md",{"type":679,"value":1176,"toc":1177},[],{"title":802,"searchDepth":1091,"depth":1091,"links":1178},[],{},"\u002Fauthors\u002Fmohammad-faisal","https:\u002F\u002Fstorage.googleapis.com\u002Fpieces-marketing-website\u002Fimages\u002Fauthors\u002Fplaceholder.svg",{"title":674,"description":802},"authors\u002Fmohammad-faisal","1uEmc9l2UHNLdkxELXvViT3QdPTFjTg1q9UMIuFnRXo",{"left":1186,"top":1186,"width":1187,"height":1187,"rotate":1186,"vFlip":1164,"hFlip":1164,"body":1188},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>"]