How to Export Your Bookmarks

<div class="browser-instructions"> <h2 class="text-2xl font-semibold mb-4 flex items-center gap-2"> <img src="/guide_resources/chrome.png" alt="Chrome" class="w-6 h-6" /> Exporting from Chrome </h2> <div class="steps space-y-8"> <div class="step"> <div class="step-header flex items-start gap-3 mb-1"> <div class="step-number bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 w-8 h-8 rounded-full flex items-center justify-center font-bold flex-shrink-0"> 1 </div> <h3 class="text-xl font-medium">Open the Chrome Menu</h3> </div> <div class="step-content ml-11"> <p class="mb-4">Click on the three dots <strong>⋮</strong> in the top-right corner of your browser window to open the Chrome menu.</p> <div class="step-image mb-4 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 shadow-xl"> <img src="/guide_resources/chrome/chrome_step_1.png" alt="Open the Chrome Menu" class="w-full" /> </div> </div> </div> <div class="step"> <div class="step-header flex items-start gap-3 mb-1"> <div class="step-number bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 w-8 h-8 rounded-full flex items-center justify-center font-bold flex-shrink-0"> 2 </div> <h3 class="text-xl font-medium">Access Bookmarks Manager</h3> </div> <div class="step-content ml-11"> <p class="mb-4">Navigate to <strong>Bookmarks > Bookmark Manager</strong>, or simply press <kbd class="new-kbd">Ctrl+Shift+O</kbd> (Windows/Linux) or <kbd class="new-kbd">⌘+Option+B</kbd> (Mac).</p> <div class="step-image mb-4 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 shadow-xl"> <img src="/guide_resources/chrome/chrome_step_2.png" alt="Access Bookmarks Manager" class="w-full" /> </div> </div> </div> <div class="step"> <div class="step-header flex items-start gap-3 mb-1"> <div class="step-number bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 w-8 h-8 rounded-full flex items-center justify-center font-bold flex-shrink-0"> 3 </div> <h3 class="text-xl font-medium">Export Bookmarks</h3> </div> <div class="step-content ml-11"> <p class="mb-4">Click on the three dots <strong>⋮</strong> in the top-right corner of the Bookmark Manager, then select <strong>Export bookmarks</strong>.</p> <div class="step-image mb-4 border border-neutral-200 dark:border-neutral-700 rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow duration-300 shadow-xl"> <img src="/guide_resources/chrome/chrome_step_3.png" alt="Export Bookmarks" class="w-full" /> </div> </div> </div> <div class="step"> <div class="step-header flex items-start gap-3 mb-1"> <div class="step-number bg-primary-100 dark:bg-primary-900 text-primary-700 dark:text-primary-300 w-8 h-8 rounded-full flex items-center justify-center font-bold flex-shrink-0"> 4 </div> <h3 class="text-xl font-medium">Save the HTML File</h3> </div> <div class="step-content ml-11"> <p class="mb-4">Choose a location on your computer to save the HTML file containing your bookmarks. The default name will be something like 'bookmarks_[date].html'.</p> <div class="step-note bg-amber-50 dark:bg-amber-900/30 border-l-4 border-amber-500 p-3 rounded-r-lg text-sm mb-2"> <strong>Note:</strong> This HTML file contains all your bookmarks and their folder structure. </div> </div> </div> </div> <div class="mt-8 pt-6 border-t border-slate-200 dark:border-neutral-700"> <h3 class="text-xl font-semibold mb-3">What's Next?</h3> <p class="mb-4">Now that you've exported your bookmarks, you can import them into WebBites:</p> <ol class="list-decimal ml-5 space-y-2"> <li>Go to your <a href="/app" class="text-primary-600 dark:text-primary-400 hover:underline">WebBites dashboard</a> and open the settings modal.</li> <div class="pb-4"> <img src="/guide_resources/webbites_import/webbites_import_1.png" alt="webbites import step 1" class="w-full rounded-lg shadow-lg" /> </div> <li>Click on the "Import bookmarks" button.</li> <div class="pb-4"> <img src="/guide_resources/webbites_import/webbites_import_2.png" alt="webbites import step 1" class="w-full rounded-lg shadow-lg" /> </div> <li>Select and upload your exported bookmarks file</li> <div class="pb-4"> <img src="/guide_resources/webbites_import/webbites_import_3.png" alt="webbites import step 1" class="w-full rounded-lg shadow-lg" /> </div> <li>Select the ones you want to upload, click on 'Import' and let WebBites organize everything for you!</li> <div class="pb-4"> <img src="/guide_resources/webbites_import/webbites_import_4.png" alt="webbites import step 1" class="w-full rounded-lg shadow-lg" /> </div> </ol> </div> </div>