Feature Request: PDF Support and Linking in Bootstrap Studio

So I frequently use Bootstrap Studio for creating and managing conference sites. A common requirement for these sites is to include conference programs, schedules, and other materials, typically in PDF format.

Currently, Bootstrap Studio does not support direct PDF management, which means we have to rely on external FTP processes to upload and update these files, which can be somewhat time-consuming and possibly complicates what should be a straightforward task.

Possible Solutions:

  1. Direct PDF Uploads: Allow users to upload PDF files directly into the Bootstrap Studio’s assets or a dedicated file management section.

  2. Easy Linking: Provide a simple way to link these PDFs within the website, similar to how we link other assets.

  3. Streamlined Updates: Enable updating of PDF files from within the studio, ensuring that the latest versions are always live without the need for external FTP access.

Possible Benefits:

  1. Enhanced Efficiency: Reduces the steps and time required to manage PDF files, streamlining the workflow.

  2. Improved User Experience: Makes it easier for website visitors to access up-to-date PDFs directly from the website.

  3. Broader Appeal: This feature could attract more users who manage academic, conference, or information-heavy sites.

Let me know what you think.


The problem with importing PDF files into BSS is that the program saves the website as a single, compressed bsdesign file. PDF files can be many hundreds of megabytes in size (or even gigabytes.) This would make the opening, saving and backing up of websites incredibly slow. Also, I don’t think BSS can support the publishing of PDFs to their own servers because (as with videos) the file sizes can be enormous.

Over the years, a few of us have floated the suggestion of having a “linked assets” folder where the program would basically keep track of an assigned folder on your computer that would contain files that you want to be added to the export folder whenever you do an export.

That would sort of be like your second suggestion.

Since Bootstrap Studio sells itself as a website building and prototyping tool, and this has been made clear by the developers by which features they approve and turn down. I think that the hosting provided by BSS is for small static project sites and to allow testing.

I would argue PDF support is something you should add through your own hosting after you have finished a design as this is not something a design tool needs to manage.

So, addressing the file size issue, modern tools and techniques for PDF optimisation can substantially reduce the size of PDF files without compromising quality (PDF Squeezer). This could mitigate the impact on the .bsdesign file’s performance to a certain extent.

Now the idea of a “linked assets” folder you mentioned would be a cool solution that supports these concerns. This would allow Bootstrap Studio to reference PDFs (and potentially other large files) without embedding them directly into the project file, thus maintaining performance while still offering the convenience of managing these assets from within the tool.

Such a system could work on a similar basis to how web development environments handle external assets by keeping them separate from the core project files until deployment. Upon exporting or publishing, Bootstrap Studio could automatically include these externally linked assets in the output, ensuring they are part of the final website without compromising the tool’s performance.

Your idea of a “linked assets” folder also presents a neat workaround for the hosting issue, as these assets could be hosted separately or optimised for web delivery, sidestepping the problem of large files on Bootstrap Studio’s servers.

So I get the viewpoint that PDF management might initially seem beyond the scope of a design tool, I believe the integration of PDF support could streamline workflows for a substantial user segment.

Regarding the hosting aspect, my suggestion is primarily aimed at users who are developing sites within their own environments, rather than relying solely on Bootstrap Studio’s hosting. Personally, I’ve established my own hosting setup specifically to address this need, which grants me backend access—a flexibility that Bootstrap Studio’s hosting doesn’t offer. This approach is common among developers who require more control over their hosting environment, especially for tasks like updating and managing PDFs and other assets.

This feature request is rooted in the understanding that while Bootstrap Studio’s hosting is a valuable tool for quick deployments and testing, many of us transition our projects to more comprehensive hosting solutions as they evolve. Enhancing Bootstrap Studio with PDF support and linking capabilities would streamline this transition, making the tool more versatile and accommodating for a wider range of professional workflows.

The BSS developers have to imagine their product being used by everyone from complete novices, to people who know how to optimized PDF files. Chances are that there will be far more of the former than the latter.

As a “for instance”, I’ve answered questions like, “why does my website take so long to open and save?” only to find the person had imported over 100 images ranging in size from 5 to 10 megabyte each into their website! This was before BSS had image optimization built in.

Perhaps the developers could allow the importing of PDFs as long as they do not exceed a certain size. I could see something like that working.

1 Like

Quite agree. Maybe even adopt some form of pdf optimization as they have with the image optimization. This feature could include options for users to control the level of optimization, balancing file size reduction with quality retention, much like the current image optimization settings. Additionally, advanced settings could allow users to tailor the optimization process to their specific needs, such as optimizing for faster web viewing or for high-quality print.

Food for thought.

If you really need your PDF’s inside BSS you can convert the PDF to a base64 string

Keep in mind that JSON files are typically used for structured data and may not be the most efficient way to store binary data like a PDF blob. However, if your use case requires it, you can encode the blob data as a base64 string and include it in a JSON object.

nodeJS example
how to convert pdf to base64 string and store it in a json file

folder structure

|-- pdfs/
|   |-- example1.pdf
|   |-- example2.pdf
|   |-- example3.pdf
|-- jsons/
|-- index.js

open mypdfs folder in VS code
in your terminal in the mypdfs folder run
npm install pdf-parse

create index.js

const fs = require('fs');
const path = require('path');
const pdf = require('pdf-parse');

const pdfsFolder = 'pdfs'; 
const jsonsFolder = 'jsons';
// Get a list of PDF files in the folder
const pdfFiles = fs.readdirSync(pdfsFolder).filter((file) => file.toLowerCase().endsWith('.pdf'));

// Array to store the list of PDF file names
const pdfFileList = [];

pdfFiles.forEach(async (pdfFileName) => {
  const pdfFilePath = path.join(pdfsFolder, pdfFileName);

  // Convert PDF file name to JSON file name
  const jsonFileName = path.basename(pdfFileName, '.pdf') + '.json';

  // Add PDF file name to the list
  pdfFileList.push({ fileName: `assets/js/${jsonFileName}` });

  // Read the PDF file
  fs.readFile(pdfFilePath, async (err, data) => {
    if (err) {
      console.error(`Error reading PDF file ${pdfFileName}:`, err);

    // Convert PDF data to base64
    const base64String = Buffer.from(data).toString('base64');

    // Create a JSON object with the file name and the base64 string
    const jsonObject = {
      fileName: path.basename(pdfFileName, '.pdf'), // Remove '.pdf' extension
      pdfData: base64String,

    // Save the JSON object to a file without '.pdf' extension
    const jsonFilePath = path.join(jsonsFolder, jsonFileName);
    fs.writeFile(jsonFilePath, JSON.stringify(jsonObject, null, 2), (err) => {
      if (err) {
        console.error(`Error writing JSON file for ${pdfFileName}:`, err);
      } else {
        console.log(`PDF content saved as base64 in ${jsonFilePath}`);

// Save the list of PDF file names to list.json
const listJsonFilePath = path.join(jsonsFolder, 'list.json');
fs.writeFile(listJsonFilePath, JSON.stringify(pdfFileList, null, 2), (err) => {
  if (err) {
    console.error('Error writing list.json file:', err);
  } else {
    console.log(`List of PDF file names saved in ${listJsonFilePath}`);

in the terminal run
node index.js

In BSS import all jsons from the jsons folder

You can use the jsons like this in BSS


<div class="container">
		<div class="row">
			<div class="col">
				<select id="pdfSelect" class="form-select"></select>
				<div class="ratio ratio-16x9">
					<iframe id="pdfIframe"></iframe>


async function fetchPdfList() {
    const response = await fetch('assets/js/list.json');
    return response.json();

// Function to fetch the selected PDF data
async function fetchPdfData(fileName) {
    const response = await fetch(fileName);
    return response.json();

// Function to populate the dropdown with PDF file names
async function populateDropdown() {
    const pdfList = await fetchPdfList();
    const pdfSelect = document.getElementById('pdfSelect');

    pdfList.forEach(item => {
        const option = document.createElement('option');
        option.value = item.fileName;
        option.text = item.fileName;

// Function to load the selected PDF in an iframe
async function loadSelectedPdf() {
    const pdfSelect = document.getElementById('pdfSelect');
    const selectedFileName = pdfSelect.value;

    if (!selectedFileName) {
        console.error('Please select a PDF file.');

    const pdfIframe = document.getElementById('pdfIframe');
    const pdfData = await fetchPdfData(selectedFileName);
    pdfIframe.src = `data:application/pdf;base64,${pdfData.pdfData}`;

// Populate dropdown on page load
const pdfJson = document.getElementById('pdfSelect')
pdfJson.addEventListener('change', () => loadSelectedPdf())

Keep in mind that base64 encoding increases the size of the data, so it may not be suitable for large files. If possible, consider storing binary data like PDFs separately from JSON, perhaps using a database or a dedicated file storage system.

here is an example

1 Like

The posts above pretty much summarize why we don’t support PDFs, video and other file types. The main reason is performance, the app stores the project as a single compressed file and we need to keep it small. The other issue is that Bootstrap Studio is focused on being a website builder, and PDFs aren’t directly related to that.

The linked resources idea would certainly be convenient and will let users access local assets from within Bootstrap Studio, but it would bring a lot of complexity related to file management and publishing. It will be a lot of effort to develop and maintain, and very few people would actually use it. So for now uploading files to your web server with FileZilla and copying over the URL is the only supported workflow.


Fair enough. I’ll stick with the process that I already use. Thanks