We are implementing a website using JSS in Code First approach. There is a requirement to have two different layouts in the site,

  1. Layout1 - for all the pre-login pages
  2. Layout2 - for all post login pages

Just wondering on how we can create multiple layouts in code first approach. Is it possible to implement easily, may be with minimal code/customization.? If not I think I can use the single layout or follow the Single page application concept and tweak the display based on some parameters. for ex,

  • if user authenticated show the components which I want to show in post login and hide pre-login specific components etc.
  • if user is not authenticated hide the post-login components and show the pre-login specific components

Any help much appreciated, Thanks.

1 Answer 1


Use different placeholders when the allowed components are different. In the placeholder settings, you can set for a placeholders the allowed renderings.

There are basically two approaches.

1) use 2 different Layouts with different placeholders.

2) 1 Layout, with a placeholder where you can place only your page renderings. where the page rendering is just a normal rendering with less html but with 1 or more placeholders.

Then you have a rendering preLogin with placeholder prelogin and a rendering afterlogin with placeholder afterlogin. In the placeholders setting from prelogin and afterlogin you define the allowed components, renderings.

Of course you can have more placeholders like header and footer.

  • 1
    1) use 2 different Layouts with different placeholders. how can i create 2 layouts in JSS code first approach, is it simple? Commented Apr 12, 2019 at 11:45
  • 2
    Bonny Nilsson wrote an excellent blog series on dynamic, multiple layouts that may be helpful for option 1: sitecore.decerno.se/post/jss-dynamic-layout-support. If you're going to use multiple layouts with potentially multiple different components that are specific to each layout, I would also highly recommend looking into code-splitting for your app - to reduce bundle size(s).
    – Adam Weber
    Commented Apr 13, 2019 at 11:36
  • @AdamWeber needed blog, this is what i was looking for. Thanks.. Commented Apr 16, 2019 at 14:15
  • @AdamWeber Blog link shared isn't opening anymore. is there any other blog you're aware of? Thanks Commented Apr 28, 2020 at 5:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.