{"id":372,"date":"2025-03-13T21:02:56","date_gmt":"2025-03-13T21:02:56","guid":{"rendered":"https:\/\/blog.hostinger.io\/support\/2025\/03\/13\/10771345-hostinger-horizons-how-to-export-code\/"},"modified":"2026-02-02T11:52:51","modified_gmt":"2026-02-02T11:52:51","slug":"10771345-hostinger-horizons-how-to-export-code","status":"publish","type":"post","link":"https:\/\/www.hostinger.com\/support\/10771345-hostinger-horizons-how-to-export-code\/","title":{"rendered":"Hostinger Horizons: How to Export Code"},"content":{"rendered":"

If you created a website using Hostinger Horizons, you can export the project’s code to use it outside the builder. This means that you are able to access the backend and be able to manually make changes inside your projects 🚀<\/p>

⚠️ Important:<\/strong> Code export is only available with an active Hostinger Horizons subscription<\/strong>. Users without a subscription will be prompted to acquire a plan when attempting to export.<\/div>

Exporting the code<\/h2>

Inside your hPanel, go to Websites List<\/a> and open the project you wish to export:<\/p>

<\/div>

Inside Horizons<\/a>, click on the Code <\/b>tab at the top of the editor.<\/p>

\"\"<\/div>
You’ll see the Export code<\/b> option under the files sidebar:
\n\"\"<\/div>
\n

💡 Important: <\/b>The exported code is a Node.js project<\/b> built with React and Vite<\/b>. At the moment, this is the only format available<\/b> for export and is the default output<\/b>.<\/p>\n<\/div>

Click Export<\/b> to start generating the code. Once the process is complete, a .zip file<\/b> containing your full project will be available for download. You can save it to your local device<\/b> and extract the contents to see and access the complete codebase.<\/p>

\n

Remember that once you exports Horizons project, there is no way to import the edited version back to Horizons and continue with prompting. You will need to proceed with manual edits or start a new project.<\/p>\n<\/div>

What can be done with the exported code<\/h2>

After exporting the code, you can:<\/p>

    \n
  1. \n

    Edit it manually<\/b>: To do this, you’ll need coding knowledge<\/b> and Node.js installed<\/b> on your local machine. This is necessary to run and modify the project properly, as it is based on Node.js tooling (Vite\/React).<\/p>\n<\/li>\n

  2. \n

    Deploy to Business or Cloud hosting plans<\/strong>: You can now deploy Node.js applications directly to Business Web Hosting<\/strong> or Cloud hosting plans<\/strong> (Cloud Startup, Cloud Professional, Cloud Enterprise, or Cloud Enterprise Plus) using Hostinger’s Node.js Web Apps feature. For detailed instructions, check out our guide on how to deploy a Node.js website in Hostinger<\/a>.<\/p>\n<\/li>\n

  3. \n

    Import to a VPS<\/strong>: You can also upload the code to a VPS server where Node.js is available and configured. You can check more details about using Node.js on VPS in this guide here<\/a>.<\/p>\n<\/li>\n

  4. \n

    Convert it to static files<\/b>: If you want to host the project on shared or cloud hosting plans<\/b>, you must first convert the code into static files<\/b> (HTML, CSS, and JS). You can do this by building the project using Vite (npm run build<\/code>), which outputs static assets that can be hosted on any web server.<\/p>\n<\/li>\n<\/ol>

    ⚠️ Note: <\/b>Uploading the raw exported code directly to hPanel (shared or cloud hosting)<\/b> without converting it to static files will not work<\/b>.<\/div>

    To use the exported code inside hPanel, you will need basic coding knowledge<\/b> to be able to make the conversion to static files.<\/p>

    If you have the static files ready, you can import them back to your hPanel by doing the following:<\/p>

      \n
    1. \n

      On Websites List<\/a>, click on Add website<\/b>:
      \n​<\/p>\n

      <\/div>\n<\/li>\n
    2. \n

      On the dropdown menu, select Empty PHP\/HTML website<\/b>:
      \n​<\/p>\n

      <\/div>\n<\/li>\n<\/ol>

      After that, you can go to your File Manager and import the static files. For more details, you can check our guide on how to upload backups manually<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

      Learn how to export your web application code, access its backend and make manual changes<\/p>\n","protected":false},"author":581,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"include_on_kodee":true,"footnotes":""},"categories":[293],"tags":[],"class_list":["post-372","post","type-post","status-publish","format-standard","hentry","category-hostinger-horizons"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/support\/10771345-hostinger-horizons-how-to-export-code\/","default":1}],"include_on_kodee":true,"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/372","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/users\/581"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/comments?post=372"}],"version-history":[{"count":7,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/372\/revisions"}],"predecessor-version":[{"id":7662,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/posts\/372\/revisions\/7662"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/media?parent=372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/categories?post=372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/support\/wp-json\/wp\/v2\/tags?post=372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}