[BUG]: Resume Section Order Sync Mismatch in Preview and PDF Export

[Gautam25Raj]

Affected Apps / Packages

Studio (apps/studio)

Description

In the Resume Editor, users can reorder resume sections (e.g., moving "Skills" above "Experience") using the arrow buttons under "Section visibility". While this action successfully updates the order property in the store state array, it has absolutely no effect on the rendering in the Editor Preview canvas or in the exported PDF document. Both continue to render sections in a hardcoded static sequence.

Steps to Reproduce

1. Open any resume in the Studio Editor.
2. Go to the "Style settings" panel on the right.
3. Scroll to "Section visibility".
4. Click the up arrow next to "Skills" to move it above "Experience".
5. Notice that the preview canvas on the screen does not update to reflect the change.
6. Click "Export PDF" and open the generated document. The section order is still incorrect.

Expected Behavior

The sections in both the web preview and the exported PDF must render dynamically, ordered according to the ascending sequence of the order property inside the resume.sections state array.

Environment Information

• OS: All (Windows, macOS, Linux)
• Browser: Chrome, Firefox, Safari
• Node.js: 20+

Relevant Logs

No response

Proposed Fix / Suggestions

1. Edit apps/studio/templates/resume/executive-clarity/web.tsx and apps/studio/templates/resume/precision-ats/web.tsx.
2. Retrieve the active sections list, filter out basics and links (which remain fixed at the top), and sort them by order.
3. Map over the sorted array and render the components dynamically:

[d3vpool]

I'd like to work on this issue.

[Gautam25Raj]

Thanks for taking this up! 🎉

I've assigned this issue to you. Feel free to ask if you need any clarification or run into any blockers while working on it. Looking forward to your contribution!

[Gautam25Raj]

Hi @d3vpool,

Just checking in to see if you are still interested in/have time to work on this issue?

Let us know if you need any help, or if we should release it for other contributors. No worries either way!

Thanks!

[d3vpool]

Hi,
Thanks for checking in! I'm still interested in working on this issue.

I spent some time investigating the codebase and repository history. I found an older refactor commit that removed the resume-related files, but after digging further, I realized those files were restored later. I'm currently tracing through the current implementation to understand where the section ordering is being lost between the store state and the preview/PDF rendering.

I'll update the issue once I've confirmed the root cause or have a proposed fix ready.

[Gautam25Raj]

Hey @d3vpool, thanks for taking this on!

The issue happens because the templates currently render the resume sections in a hardcoded sequence in the JSX instead of using the order property from the store.

To fix this, we need to dynamically render the sections based on their order in resume.sections (excluding basics and links, since they are always fixed at the top header).

Here is a clean approach you can use across all four template files (both web.tsx and pdf.tsx for both executive-clarity and precision-ats templates):

1. Filter and sort the sections

First, get a sorted list of the sections by their order value:

const sortedSections = [...resume.sections]
  .filter((s) => s.id !== "basics" && s.id !== "links")
  .sort((a, b) => a.order - b.order);

2. Map and render dynamically

Instead of rendering each section one-by-one, you can map over sortedSections using a switch statement to decide what to render:

{sortedSections.map((section) => {
  // If the section doesn't have any content or is toggled off, skip rendering
  if (!hasResumeSectionContent(resume, section.id)) return null;

  switch (section.id) {
    case "summary":
      return (
        // Copy the existing hardcoded Summary JSX block here
      );
    case ....
    default: {
      // For custom sections (like certifications, awards, volunteer, or custom ones)
      const customSec = resume.customSections.find((cs) => cs.kind === section.id);
      if (!customSec || !hasCustomSectionContent(customSec)) return null;
      
      // For web/preview:
      return renderCustomSection(customSec, customization); 
      // For PDF: copy the existing custom section render JSX block here
    }
  }
})}

Note

Since the custom sections are now rendered inline via the default case of the loop, you can remove the old .map of visibleCustomSections at the bottom of the files, along with the visibleCustomSections variables at the top of the render components.

Files to update:

You'll want to apply this dynamic rendering in these four files:

• apps/studio/templates/resume/executive-clarity/web.tsx
• apps/studio/templates/resume/executive-clarity/pdf.tsx
• apps/studio/templates/resume/precision-ats/web.tsx
• apps/studio/templates/resume/precision-ats/pdf.tsx

Let me know if this makes sense or if you have any questions. Thanks again!

[d3vpool]

Hi @Gautam25Raj ,

Thanks for the detailed guidance. It helped me understand the expected implementation better.

I wanted to give you a quick update. I have an interview scheduled for 2nd July, so I'm focusing on preparing for that over the next few days. Because of that, I won't be able to contribute until 2nd July.

I'm still interested in contributing and plan to continue my work immediately afterwards. However, if you'd prefer to keep the issue moving and reassign it to someone else, I completely understand.

Thanks for your patience.

[Gautam25Raj]

Hi @d3vpool,

Thanks for the update, and all the best for your interview on 2nd July!

No problem at all. You can keep the issue assigned. Focus on your interview first, and once you're done, feel free to continue working on it. Just post an update when you're back so we know you're actively working on it.

Good luck!

[d3vpool]

Hi! Thanks again for your understanding and the well wishes.

My interview is over now, and I'm back to working on this issue. I''ll continue making progress and share an update as I have something ready for review.

Thanks!